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

update

parent e1c20344
Pipeline #4745 passed with stages
in 1 minute and 4 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 1988 additions and 1844 deletions
+1988 -1844
public/SCD/assets/css/style.css
+ 1291
- 1214
View file @ 8ce45e4a
......@@ -5,2366 +5,2443 @@
* License: https://bootstrapmade.com/license/
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
scroll-behavior: smooth;
scroll-behavior: smooth;
}
body {
font-family: "Open Sans", sans-serif;
color: #444444;
font-family: "Open Sans", sans-serif;
color: #444444;
}
a {
color: #4154f1;
text-decoration: none;
color: #4154f1;
text-decoration: none;
}
a:hover {
color: #717ff5;
text-decoration: none;
color: #717ff5;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Nunito", sans-serif;
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Nunito", sans-serif;
}
/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
section {
padding: 60px 0;
overflow: hidden;
padding: 60px 0;
overflow: hidden;
}
.section-header {
text-align: center;
padding-bottom: 40px;
text-align: center;
padding-bottom: 40px;
}
.section-header h2 {
font-size: 13px;
letter-spacing: 1px;
font-weight: 700;
margin: 0;
color: #4154f1;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
font-weight: 700;
margin: 0;
color: #4154f1;
text-transform: uppercase;
}
.section-header p {
margin: 10px 0 0 0;
padding: 0;
font-size: 38px;
line-height: 42px;
font-weight: 700;
color: #012970;
margin: 10px 0 0 0;
padding: 0;
font-size: 38px;
line-height: 42px;
font-weight: 700;
color: #012970;
}
@media (max-width: 768px) {
.section-header p {
font-size: 28px;
line-height: 32px;
}
.section-header p {
font-size: 28px;
line-height: 32px;
}
}
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
padding: 15px 0;
background: #012970;
min-height: 40px;
margin-top: 82px;
color: #fff;
padding: 15px 0;
background: #012970;
min-height: 40px;
margin-top: 82px;
color: #fff;
}
@media (max-width: 992px) {
.breadcrumbs {
margin-top: 57px;
}
.breadcrumbs {
margin-top: 57px;
}
}
.breadcrumbs h2 {
font-size: 28px;
font-weight: 500;
font-size: 28px;
font-weight: 500;
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0 0 10px 0;
margin: 0;
font-size: 14px;
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0 0 10px 0;
margin: 0;
font-size: 14px;
}
.breadcrumbs ol a {
color: #fff;
transition: 0.3s;
color: #fff;
transition: 0.3s;
}
.breadcrumbs ol a:hover {
text-decoration: underline;
text-decoration: underline;
}
.breadcrumbs ol li + li {
padding-left: 10px;
.breadcrumbs ol li+li {
padding-left: 10px;
}
.breadcrumbs ol li + li::before {
display: inline-block;
padding-right: 10px;
color: #8894f6;
content: "/";
.breadcrumbs ol li+li::before {
display: inline-block;
padding-right: 10px;
color: #8894f6;
content: "/";
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 99999;
background: #4154f1;
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 99999;
background: #4154f1;
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
}
.back-to-top i {
font-size: 24px;
color: #fff;
line-height: 0;
font-size: 24px;
color: #fff;
line-height: 0;
}
.back-to-top:hover {
background: #6776f4;
color: #fff;
background: #6776f4;
color: #fff;
}
.back-to-top.active {
visibility: visible;
opacity: 1;
visibility: visible;
opacity: 1;
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
[data-aos-delay] {
transition-delay: 0 !important;
}
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
transition: all 0.5s;
z-index: 997;
padding: 20px 0;
transition: all 0.5s;
z-index: 997;
padding: 20px 0;
}
.header.header-scrolled {
background: #fff;
padding: 15px 0;
box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
background: #fff;
padding: 15px 0;
box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
}
.header .logo {
line-height: 0;
line-height: 0;
}
.header .logo img {
max-height: 40px;
margin-right: 6px;
max-height: 40px;
margin-right: 6px;
}
.header .logo span {
font-size: 30px;
font-weight: 700;
letter-spacing: 1px;
color: #012970;
font-family: "Nunito", sans-serif;
margin-top: 3px;
font-size: 30px;
font-weight: 700;
letter-spacing: 1px;
color: #012970;
font-family: "Nunito", sans-serif;
margin-top: 3px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
position: relative;
}
.navbar a, .navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 30px;
font-family: "Nunito", sans-serif;
font-size: 16px;
font-weight: 700;
color: #013289;
white-space: nowrap;
transition: 0.3s;
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 30px;
font-family: "Nunito", sans-serif;
font-size: 16px;
font-weight: 700;
color: #013289;
white-space: nowrap;
transition: 0.3s;
}
.navbar a i, .navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
color: #f1414a;
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #f1414a;
}
.navbar .getstarted {
background: #f14141;
padding: 8px 20px;
margin-left: 30px;
border-radius: 4px;
color: #fff;
background: #f14141;
padding: 8px 20px;
margin-left: 30px;
border-radius: 4px;
color: #fff;
}
.navbar .getstarted:hover {
color: #fff;
background: #f1414a;
color: #fff;
background: #f1414a;
}
.navbar .dropdown ul {
display: block;
position: absolute;
left: 14px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
border-radius: 4px;
display: block;
position: absolute;
left: 14px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
border-radius: 4px;
}
.navbar .dropdown ul li {
min-width: 200px;
min-width: 200px;
}
.navbar .dropdown ul a {
padding: 10px 20px;
font-size: 15px;
text-transform: none;
font-weight: 600;
padding: 10px 20px;
font-size: 15px;
text-transform: none;
font-weight: 600;
}
.navbar .dropdown ul a i {
font-size: 12px;
font-size: 12px;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
color: #4154f1;
.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
color: #4154f1;
}
.navbar .dropdown:hover > ul {
opacity: 1;
top: 100%;
visibility: visible;
.navbar .dropdown:hover>ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navbar .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
.navbar .dropdown .dropdown:hover>ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}
@media (max-width: 1366px) {
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover > ul {
left: -100%;
}
.navbar .dropdown .dropdown ul {
left: -90%;
}
.navbar .dropdown .dropdown:hover>ul {
left: -100%;
}
}
/**
* Mobile Navigation
*/
.mobile-nav-toggle {
color: #012970;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
color: #FFF;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
.mobile-nav-toggle.bi-x {
color: #fff;
color: #fff;
}
@media (max-width: 991px) {
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
}
.navbar-mobile {
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(1, 22, 61, 0.9);
transition: 0.3s;
position: fixed;
overflow: hidden;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(1, 22, 61, 0.9);
transition: 0.3s;
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
border-radius: 10px;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
display: block;
position: absolute;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
border-radius: 10px;
background-color: #fff;
overflow-y: auto;
transition: 0.3s;
}
.navbar-mobile a {
padding: 10px 20px;
font-size: 15px;
color: #012970;
padding: 10px 20px;
font-size: 15px;
color: #012970;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
color: #4154f1;
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
color: #4154f1;
}
.navbar-mobile .getstarted {
margin: 15px;
margin: 15px;
}
.navbar-mobile .dropdown ul {
position: static;
display: none;
margin: 10px 20px;
padding: 10px 0;
z-index: 99;
opacity: 1;
visibility: visible;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
position: static;
display: none;
margin: 10px 20px;
padding: 10px 0;
z-index: 99;
opacity: 1;
visibility: visible;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
min-width: 200px;
min-width: 200px;
}
.navbar-mobile .dropdown ul a {
padding: 10px 20px;
padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
font-size: 12px;
font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
color: #4154f1;
.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
color: #4154f1;
}
.navbar-mobile .dropdown > .dropdown-active {
display: block;
.navbar-mobile .dropdown>.dropdown-active {
display: block;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
width: 100%;
height: 100vh;
background: url(../img/hero-bg.png) top center no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
background: url(../img/hero-bg.png) top center no-repeat;
background-size: cover;
}
.hero h1 {
margin: 0;
font-size: 48px;
font-weight: 700;
color: #012970;
margin: 0;
font-size: 48px;
font-weight: 700;
color: #012970;
}
.hero h2 {
color: #444444;
margin: 15px 0 0 0;
font-size: 26px;
color: #444444;
margin: 15px 0 0 0;
font-size: 26px;
}
.hero .btn-get-started {
margin-top: 30px;
line-height: 0;
padding: 15px 40px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background: #f14141;
box-shadow: 0px 5px 30px rgba(65, 84, 241, 0.4);
margin-top: 30px;
line-height: 0;
padding: 15px 40px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background: #f14141;
box-shadow: 0px 5px 30px rgba(65, 84, 241, 0.4);
}
.hero .btn-get-started span {
font-family: "Nunito", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
font-family: "Nunito", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
}
.hero .btn-get-started i {
margin-left: 5px;
font-size: 18px;
transition: 0.3s;
margin-left: 5px;
font-size: 18px;
transition: 0.3s;
}
.hero .btn-get-started:hover i {
transform: translateX(5px);
transform: translateX(5px);
}
.hero .hero-img {
text-align: right;
text-align: right;
}
@media (min-width: 1024px) {
.hero {
background-attachment: fixed;
}
.hero {
background-attachment: fixed;
}
}
@media (max-width: 991px) {
.hero {
height: auto;
padding: 120px 0 60px 0;
}
.hero .hero-img {
text-align: center;
margin-top: 80px;
}
.hero .hero-img img {
width: 80%;
}
.hero {
height: auto;
padding: 120px 0 60px 0;
}
.hero .hero-img {
text-align: center;
margin-top: 80px;
}
.hero .hero-img img {
width: 80%;
}
}
@media (max-width: 768px) {
.hero {
text-align: center;
}
.hero h1 {
font-size: 32px;
}
.hero h2 {
font-size: 24px;
}
.hero .hero-img img {
width: 100%;
}
.hero {
text-align: center;
}
.hero h1 {
font-size: 32px;
}
.hero h2 {
font-size: 24px;
}
.hero .hero-img img {
width: 100%;
}
}
/*--------------------------------------------------------------
# Index Page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .content {
background-color: #f6f9ff;
padding: 40px;
background-color: #f6f9ff;
padding: 40px;
}
.about h3 {
font-size: 14px;
font-weight: 700;
color: #4154f1;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
color: #4154f1;
text-transform: uppercase;
}
.about h2 {
font-size: 24px;
font-weight: 700;
color: #012970;
font-size: 24px;
font-weight: 700;
color: #012970;
}
.about p {
margin: 15px 0 30px 0;
line-height: 24px;
margin: 15px 0 30px 0;
line-height: 24px;
}
.about .btn-read-more {
line-height: 0;
padding: 15px 40px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background: #f14141;
box-shadow: 0px 5px 25px rgba(65, 84, 241, 0.3);
line-height: 0;
padding: 15px 40px;
border-radius: 4px;
transition: 0.5s;
color: #fff;
background: #f14141;
box-shadow: 0px 5px 25px rgba(65, 84, 241, 0.3);
}
.about .btn-read-more span {
font-family: "Nunito", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
font-family: "Nunito", sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
}
.about .btn-read-more i {
margin-left: 5px;
font-size: 18px;
transition: 0.3s;
margin-left: 5px;
font-size: 18px;
transition: 0.3s;
}
.about .btn-read-more:hover i {
transform: translateX(5px);
transform: translateX(5px);
}
/*--------------------------------------------------------------
# Values
--------------------------------------------------------------*/
.values .box {
padding: 30px;
box-shadow: 0px 0 5px rgba(1, 41, 112, 0.08);
text-align: center;
transition: 0.3s;
height: 100%;
padding: 30px;
box-shadow: 0px 0 5px rgba(1, 41, 112, 0.08);
text-align: center;
transition: 0.3s;
height: 100%;
}
.values .box img {
padding: 30px 50px;
transition: 0.5s;
transform: scale(1.1);
padding: 30px 50px;
transition: 0.5s;
transform: scale(1.1);
}
.values .box h3 {
font-size: 24px;
color: #012970;
font-weight: 700;
margin-bottom: 18px;
font-size: 24px;
color: #012970;
font-weight: 700;
margin-bottom: 18px;
}
.values .box:hover {
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}
.values .box:hover img {
transform: scale(1);
transform: scale(1);
}
/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
.counts {
padding: 70px 0 60px;
padding: 70px 0 60px;
}
.counts .count-box {
display: flex;
align-items: center;
padding: 30px;
width: 100%;
background: #fff;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
display: flex;
align-items: center;
padding: 30px;
width: 100%;
background: #fff;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}
.counts .count-box i {
font-size: 42px;
line-height: 0;
margin-right: 20px;
color: #4154f1;
font-size: 42px;
line-height: 0;
margin-right: 20px;
color: #4154f1;
}
.counts .count-box span {
font-size: 36px;
display: block;
font-weight: 600;
color: #0b198f;
font-size: 36px;
display: block;
font-weight: 600;
color: #0b198f;
}
.counts .count-box p {
padding: 0;
margin: 0;
font-family: "Nunito", sans-serif;
font-size: 14px;
padding: 0;
margin: 0;
font-family: "Nunito", sans-serif;
font-size: 14px;
}
/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
.features .feature-box {
padding: 24px 20px;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
transition: 0.3s;
height: 100%;
padding: 24px 20px;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
transition: 0.3s;
height: 100%;
}
.features .feature-box h3 {
font-size: 18px;
color: #012970;
font-weight: 700;
margin: 0;
font-size: 18px;
color: #012970;
font-weight: 700;
margin: 0;
}
.features .feature-box i {
line-height: 0;
background: #ecf3ff;
padding: 4px;
margin-right: 10px;
font-size: 24px;
border-radius: 3px;
transition: 0.3s;
line-height: 0;
background: #ecf3ff;
padding: 4px;
margin-right: 10px;
font-size: 24px;
border-radius: 3px;
transition: 0.3s;
}
.features .feature-box:hover i {
background: #4154f1;
color: #fff;
background: #4154f1;
color: #fff;
}
.features .feture-tabs {
margin-top: 120px;
margin-top: 120px;
}
.features .feture-tabs h3 {
color: #012970;
font-weight: 700;
font-size: 32px;
margin-bottom: 10px;
color: #012970;
font-weight: 700;
font-size: 32px;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.features .feture-tabs h3 {
font-size: 28px;
}
.features .feture-tabs h3 {
font-size: 28px;
}
}
.features .feture-tabs .nav-pills {
border-bottom: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.features .feture-tabs .nav-link {
background: none;
text-transform: uppercase;
font-size: 15px;
font-weight: 600;
color: #012970;
padding: 12px 0;
margin-right: 25px;
margin-bottom: -2px;
border-radius: 0;
background: none;
text-transform: uppercase;
font-size: 15px;
font-weight: 600;
color: #012970;
padding: 12px 0;
margin-right: 25px;
margin-bottom: -2px;
border-radius: 0;
}
.features .feture-tabs .nav-link.active {
color: #4154f1;
border-bottom: 3px solid #4154f1;
color: #4154f1;
border-bottom: 3px solid #4154f1;
}
.features .feture-tabs .tab-content h4 {
font-size: 18px;
margin: 0;
font-weight: 700;
color: #012970;
font-size: 18px;
margin: 0;
font-weight: 700;
color: #012970;
}
.features .feture-tabs .tab-content i {
font-size: 24px;
line-height: 0;
margin-right: 8px;
color: #4154f1;
font-size: 24px;
line-height: 0;
margin-right: 8px;
color: #4154f1;
}
.features .feature-icons {
margin-top: 120px;
margin-top: 120px;
}
.features .feature-icons h3 {
color: #012970;
font-weight: 700;
font-size: 32px;
margin-bottom: 20px;
text-align: center;
color: #012970;
font-weight: 700;
font-size: 32px;
margin-bottom: 20px;
text-align: center;
}
@media (max-width: 768px) {
.features .feature-icons h3 {
font-size: 28px;
}
.features .feature-icons h3 {
font-size: 28px;
}
}
.features .feature-icons .content .icon-box {
display: flex;
display: flex;
}
.features .feature-icons .content .icon-box h4 {
font-size: 20px;
font-weight: 700;
margin: 0 0 10px 0;
color: #012970;
font-size: 20px;
font-weight: 700;
margin: 0 0 10px 0;
color: #012970;
}
.features .feature-icons .content .icon-box i {
font-size: 44px;
line-height: 44px;
color: #0245bc;
margin-right: 15px;
font-size: 44px;
line-height: 44px;
color: #0245bc;
margin-right: 15px;
}
.features .feature-icons .content .icon-box p {
font-size: 15px;
color: #848484;
font-size: 15px;
color: #848484;
}
/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .service-box {
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
height: 100%;
padding: 60px 30px;
text-align: center;
transition: 0.3s;
border-radius: 5px;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
height: 100%;
padding: 60px 30px;
text-align: center;
transition: 0.3s;
border-radius: 5px;
}
.services .service-box .icon {
font-size: 36px;
padding: 40px 20px;
border-radius: 4px;
position: relative;
margin-bottom: 25px;
display: inline-block;
line-height: 0;
transition: 0.3s;
font-size: 36px;
padding: 40px 20px;
border-radius: 4px;
position: relative;
margin-bottom: 25px;
display: inline-block;
line-height: 0;
transition: 0.3s;
}
.services .service-box h3 {
color: #444444;
font-weight: 700;
color: #444444;
font-weight: 700;
}
.services .service-box .read-more {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 16px;
padding: 8px 20px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 16px;
padding: 8px 20px;
}
.services .service-box .read-more i {
line-height: 0;
margin-left: 5px;
font-size: 18px;
line-height: 0;
margin-left: 5px;
font-size: 18px;
}
.services .service-box.blue {
border-bottom: 3px solid #2db6fa;
border-bottom: 3px solid #2db6fa;
}
.services .service-box.blue .icon {
color: #2db6fa;
background: #dbf3fe;
color: #2db6fa;
background: #dbf3fe;
}
.services .service-box.blue .read-more {
color: #2db6fa;
color: #2db6fa;
}
.services .service-box.blue:hover {
background: #2db6fa;
background: #2db6fa;
}
.services .service-box.orange {
border-bottom: 3px solid #f68c09;
border-bottom: 3px solid #f68c09;
}
.services .service-box.orange .icon {
color: #f68c09;
background: #fde3c4;
color: #f68c09;
background: #fde3c4;
}
.services .service-box.orange .read-more {
color: #f68c09;
color: #f68c09;
}
.services .service-box.orange:hover {
background: #f68c09;
background: #f68c09;
}
.services .service-box.green {
border-bottom: 3px solid #08da4e;
border-bottom: 3px solid #08da4e;
}
.services .service-box.green .icon {
color: #08da4e;
background: #cffddf;
color: #08da4e;
background: #cffddf;
}
.services .service-box.green .read-more {
color: #08da4e;
color: #08da4e;
}
.services .service-box.green:hover {
background: #08da4e;
background: #08da4e;
}
.services .service-box.red {
border-bottom: 3px solid #e9222c;
border-bottom: 3px solid #e9222c;
}
.services .service-box.red .icon {
color: #e9222c;
background: #fef7f8;
color: #e9222c;
background: #fef7f8;
}
.services .service-box.red .read-more {
color: #e9222c;
color: #e9222c;
}
.services .service-box.red:hover {
background: #e9222c;
background: #e9222c;
}
.services .service-box.purple {
border-bottom: 3px solid #b50edf;
border-bottom: 3px solid #b50edf;
}
.services .service-box.purple .icon {
color: #b50edf;
background: #f8e4fd;
color: #b50edf;
background: #f8e4fd;
}
.services .service-box.purple .read-more {
color: #b50edf;
color: #b50edf;
}
.services .service-box.purple:hover {
background: #b50edf;
background: #b50edf;
}
.services .service-box.pink {
border-bottom: 3px solid #f51f9c;
border-bottom: 3px solid #f51f9c;
}
.services .service-box.pink .icon {
color: #f51f9c;
background: #feecf7;
color: #f51f9c;
background: #feecf7;
}
.services .service-box.pink .read-more {
color: #f51f9c;
color: #f51f9c;
}
.services .service-box.pink:hover {
background: #f51f9c;
background: #f51f9c;
}
.services .service-box:hover h3, .services .service-box:hover p, .services .service-box:hover .read-more {
color: #fff;
.services .service-box:hover h3,
.services .service-box:hover p,
.services .service-box:hover .read-more {
color: #fff;
}
.services .service-box:hover .icon {
background: #fff;
background: #fff;
}
/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing .box {
padding: 40px 20px;
background: #fff;
text-align: center;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
border-radius: 4px;
position: relative;
overflow: hidden;
transition: 0.3s;
padding: 40px 20px;
background: #fff;
text-align: center;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
border-radius: 4px;
position: relative;
overflow: hidden;
transition: 0.3s;
}
.pricing .box:hover {
transform: scale(1.1);
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
transform: scale(1.1);
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}
.pricing h3 {
font-weight: 700;
font-size: 18px;
margin-bottom: 15px;
font-weight: 700;
font-size: 18px;
margin-bottom: 15px;
}
.pricing .price {
font-size: 36px;
color: #444444;
font-weight: 600;
font-family: "Poppins", sans-serif;
font-size: 36px;
color: #444444;
font-weight: 600;
font-family: "Poppins", sans-serif;
}
.pricing .price sup {
font-size: 20px;
top: -15px;
left: -3px;
font-size: 20px;
top: -15px;
left: -3px;
}
.pricing .price span {
color: #bababa;
font-size: 16px;
font-weight: 300;
color: #bababa;
font-size: 16px;
font-weight: 300;
}
.pricing img {
padding: 30px 40px;
padding: 30px 40px;
}
.pricing ul {
padding: 0;
list-style: none;
color: #444444;
text-align: center;
line-height: 26px;
font-size: 16px;
margin-bottom: 25px;
padding: 0;
list-style: none;
color: #444444;
text-align: center;
line-height: 26px;
font-size: 16px;
margin-bottom: 25px;
}
.pricing ul li {
padding-bottom: 10px;
padding-bottom: 10px;
}
.pricing ul .na {
color: #ccc;
text-decoration: line-through;
color: #ccc;
text-decoration: line-through;
}
.pricing .btn-buy {
display: inline-block;
padding: 8px 40px 10px 40px;
border-radius: 50px;
color: #4154f1;
transition: none;
font-size: 16px;
font-weight: 400;
font-family: "Nunito", sans-serif;
font-weight: 600;
transition: 0.3s;
border: 1px solid #4154f1;
display: inline-block;
padding: 8px 40px 10px 40px;
border-radius: 50px;
color: #4154f1;
transition: none;
font-size: 16px;
font-weight: 400;
font-family: "Nunito", sans-serif;
font-weight: 600;
transition: 0.3s;
border: 1px solid #4154f1;
}
.pricing .btn-buy:hover {
background: #4154f1;
color: #fff;
background: #4154f1;
color: #fff;
}
.pricing .featured {
width: 200px;
position: absolute;
top: 18px;
right: -68px;
transform: rotate(45deg);
z-index: 1;
font-size: 14px;
padding: 1px 0 3px 0;
background: #4154f1;
color: #fff;
width: 200px;
position: absolute;
top: 18px;
right: -68px;
transform: rotate(45deg);
z-index: 1;
font-size: 14px;
padding: 1px 0 3px 0;
background: #4154f1;
color: #fff;
}
/*--------------------------------------------------------------
# F.A.Q
--------------------------------------------------------------*/
.faq .accordion-collapse {
border: 0;
border: 0;
}
.faq .accordion-button {
padding: 15px 15px 20px 0;
font-weight: 600;
border: 0;
font-size: 18px;
color: #444444;
text-align: left;
padding: 15px 15px 20px 0;
font-weight: 600;
border: 0;
font-size: 18px;
color: #444444;
text-align: left;
}
.faq .accordion-button:focus {
box-shadow: none;
box-shadow: none;
}
.faq .accordion-button:not(.collapsed) {
background: none;
color: #4154f1;
border-bottom: 0;
background: none;
color: #4154f1;
border-bottom: 0;
}
.faq .accordion-body {
padding: 0 0 25px 0;
border: 0;
padding: 0 0 25px 0;
border: 0;
}
/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio #portfolio-flters {
padding: 0;
margin: 0 auto 25px auto;
list-style: none;
text-align: center;
background: white;
border-radius: 50px;
padding: 2px 15px;
padding: 0;
margin: 0 auto 25px auto;
list-style: none;
text-align: center;
background: white;
border-radius: 50px;
padding: 2px 15px;
}
.portfolio #portfolio-flters li {
cursor: pointer;
display: inline-block;
padding: 8px 20px 10px 20px;
font-size: 15px;
font-weight: 600;
line-height: 1;
color: #444444;
margin: 0 4px 8px 4px;
transition: 0.3s;
border-radius: 50px;
border: 1px solid #fff;
cursor: pointer;
display: inline-block;
padding: 8px 20px 10px 20px;
font-size: 15px;
font-weight: 600;
line-height: 1;
color: #444444;
margin: 0 4px 8px 4px;
transition: 0.3s;
border-radius: 50px;
border: 1px solid #fff;
}
.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {
color: #4154f1;
border-color: #4154f1;
.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
color: #4154f1;
border-color: #4154f1;
}
.portfolio #portfolio-flters li:last-child {
margin-right: 0;
margin-right: 0;
}
.portfolio .portfolio-wrap {
transition: 0.3s;
position: relative;
overflow: hidden;
z-index: 1;
background: rgba(255, 255, 255, 0.75);
transition: 0.3s;
position: relative;
overflow: hidden;
z-index: 1;
background: rgba(255, 255, 255, 0.75);
}
.portfolio .portfolio-wrap::before {
content: "";
background: rgba(255, 255, 255, 0.75);
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
transition: all ease-in-out 0.3s;
z-index: 2;
opacity: 0;
content: "";
background: rgba(255, 255, 255, 0.75);
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
transition: all ease-in-out 0.3s;
z-index: 2;
opacity: 0;
}
.portfolio .portfolio-wrap img {
transition: 1s;
transition: 1s;
}
.portfolio .portfolio-wrap .portfolio-info {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
z-index: 3;
transition: all ease-in-out 0.3s;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
z-index: 3;
transition: all ease-in-out 0.3s;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.portfolio .portfolio-wrap .portfolio-info::before {
display: block;
content: "";
width: 48px;
height: 48px;
position: absolute;
top: 35px;
left: 35px;
border-top: 3px solid rgba(1, 41, 112, 0.2);
border-left: 3px solid rgba(1, 41, 112, 0.2);
transition: all 0.5s ease 0s;
z-index: 9994;
display: block;
content: "";
width: 48px;
height: 48px;
position: absolute;
top: 35px;
left: 35px;
border-top: 3px solid rgba(1, 41, 112, 0.2);
border-left: 3px solid rgba(1, 41, 112, 0.2);
transition: all 0.5s ease 0s;
z-index: 9994;
}
.portfolio .portfolio-wrap .portfolio-info::after {
display: block;
content: "";
width: 48px;
height: 48px;
position: absolute;
bottom: 35px;
right: 35px;
border-bottom: 3px solid rgba(1, 41, 112, 0.2);
border-right: 3px solid rgba(1, 41, 112, 0.2);
transition: all 0.5s ease 0s;
z-index: 9994;
display: block;
content: "";
width: 48px;
height: 48px;
position: absolute;
bottom: 35px;
right: 35px;
border-bottom: 3px solid rgba(1, 41, 112, 0.2);
border-right: 3px solid rgba(1, 41, 112, 0.2);
transition: all 0.5s ease 0s;
z-index: 9994;
}
.portfolio .portfolio-wrap .portfolio-info h4 {
font-size: 20px;
color: #012970;
font-weight: 700;
font-size: 20px;
color: #012970;
font-weight: 700;
}
.portfolio .portfolio-wrap .portfolio-info p {
color: #012970;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
padding: 0;
margin: 0;
color: #012970;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
padding: 0;
margin: 0;
}
.portfolio .portfolio-wrap .portfolio-links {
text-align: center;
z-index: 4;
text-align: center;
z-index: 4;
}
.portfolio .portfolio-wrap .portfolio-links a {
color: #fff;
background: #4154f1;
margin: 10px 2px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: 0.3s;
color: #fff;
background: #4154f1;
margin: 10px 2px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: 0.3s;
}
.portfolio .portfolio-wrap .portfolio-links a i {
font-size: 24px;
line-height: 0;
font-size: 24px;
line-height: 0;
}
.portfolio .portfolio-wrap .portfolio-links a:hover {
background: #5969f3;
background: #5969f3;
}
.portfolio .portfolio-wrap:hover img {
transform: scale(1.1);
transform: scale(1.1);
}
.portfolio .portfolio-wrap:hover::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
}
.portfolio .portfolio-wrap:hover .portfolio-info {
opacity: 1;
opacity: 1;
}
.portfolio .portfolio-wrap:hover .portfolio-info::before {
top: 15px;
left: 15px;
top: 15px;
left: 15px;
}
.portfolio .portfolio-wrap:hover .portfolio-info::after {
bottom: 15px;
right: 15px;
bottom: 15px;
right: 15px;
}
/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
padding-top: 40px;
padding-top: 40px;
}
.portfolio-details .portfolio-details-slider img {
width: 100%;
width: 100%;
}
.portfolio-details .portfolio-details-slider .swiper-pagination {
margin-top: 20px;
position: relative;
margin-top: 20px;
position: relative;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #4154f1;
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #4154f1;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
background-color: #4154f1;
background-color: #4154f1;
}
.portfolio-details .portfolio-info {
padding: 30px;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
padding: 30px;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}
.portfolio-details .portfolio-info h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
font-size: 22px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
.portfolio-details .portfolio-info ul {
list-style: none;
padding: 0;
font-size: 15px;
list-style: none;
padding: 0;
font-size: 15px;
}
.portfolio-details .portfolio-info ul li + li {
margin-top: 10px;
.portfolio-details .portfolio-info ul li+li {
margin-top: 10px;
}
.portfolio-details .portfolio-description {
padding-top: 30px;
padding-top: 30px;
}
.portfolio-details .portfolio-description h2 {
font-size: 26px;
font-weight: 700;
margin-bottom: 20px;
font-size: 26px;
font-weight: 700;
margin-bottom: 20px;
}
.portfolio-details .portfolio-description p {
padding: 0;
padding: 0;
}
/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .testimonial-item {
box-sizing: content-box;
padding: 30px;
margin: 40px 30px;
box-shadow: 0px 0 20px rgba(1, 41, 112, 0.1);
background: #fff;
min-height: 320px;
display: flex;
flex-direction: column;
text-align: center;
transition: 0.3s;
box-sizing: content-box;
padding: 30px;
margin: 40px 30px;
box-shadow: 0px 0 20px rgba(1, 41, 112, 0.1);
background: #fff;
min-height: 320px;
display: flex;
flex-direction: column;
text-align: center;
transition: 0.3s;
}
.testimonials .testimonial-item .stars {
margin-bottom: 15px;
margin-bottom: 15px;
}
.testimonials .testimonial-item .stars i {
color: #ffc107;
margin: 0 1px;
color: #ffc107;
margin: 0 1px;
}
.testimonials .testimonial-item .testimonial-img {
width: 90px;
border-radius: 50%;
border: 4px solid #fff;
margin: 0 auto;
width: 90px;
border-radius: 50%;
border: 4px solid #fff;
margin: 0 auto;
}
.testimonials .testimonial-item h3 {
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 0;
color: #111;
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 0;
color: #111;
}
.testimonials .testimonial-item h4 {
font-size: 14px;
color: #999;
margin: 0;
font-size: 14px;
color: #999;
margin: 0;
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 0 auto 15px auto;
font-style: italic;
margin: 0 auto 15px auto;
}
.testimonials .swiper-pagination {
margin-top: 20px;
position: relative;
margin-top: 20px;
position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #4154f1;
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #4154f1;
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
background-color: #4154f1;
background-color: #4154f1;
}
.testimonials .swiper-slide {
opacity: .3;
opacity: .3;
}
@media (max-width: 1199px) {
.testimonials .swiper-slide-active {
opacity: 1;
}
.testimonials .swiper-pagination {
margin-top: 0;
}
.testimonials .swiper-slide-active {
opacity: 1;
}
.testimonials .swiper-pagination {
margin-top: 0;
}
}
@media (min-width: 1200px) {
.testimonials .swiper-slide-next {
opacity: 1;
transform: scale(1.12);
}
.testimonials .swiper-slide-next {
opacity: 1;
transform: scale(1.12);
}
}
/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team {
background: #fff;
padding: 60px 0;
background: #fff;
padding: 60px 0;
}
.team .member {
overflow: hidden;
text-align: center;
border-radius: 5px;
background: #fff;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
transition: 0.3s;
overflow: hidden;
text-align: center;
border-radius: 5px;
background: #fff;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
transition: 0.3s;
}
.team .member .member-img {
position: relative;
overflow: hidden;
position: relative;
overflow: hidden;
}
.team .member .member-img:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
height: 100%;
width: 100%;
background: url(../img/team-shape.svg) no-repeat center bottom;
background-size: contain;
z-index: 1;
position: absolute;
content: "";
left: 0;
bottom: 0;
height: 100%;
width: 100%;
background: url(../img/team-shape.svg) no-repeat center bottom;
background-size: contain;
z-index: 1;
}
.team .member .social {
position: absolute;
right: -100%;
top: 30px;
opacity: 0;
border-radius: 4px;
transition: 0.5s;
background: rgba(255, 255, 255, 0.3);
z-index: 2;
position: absolute;
right: -100%;
top: 30px;
opacity: 0;
border-radius: 4px;
transition: 0.5s;
background: rgba(255, 255, 255, 0.3);
z-index: 2;
}
.team .member .social a {
transition: color 0.3s;
color: rgba(1, 41, 112, 0.5);
margin: 15px 12px;
display: block;
line-height: 0;
text-align: center;
transition: color 0.3s;
color: rgba(1, 41, 112, 0.5);
margin: 15px 12px;
display: block;
line-height: 0;
text-align: center;
}
.team .member .social a:hover {
color: rgba(1, 41, 112, 0.8);
color: rgba(1, 41, 112, 0.8);
}
.team .member .social i {
font-size: 18px;
font-size: 18px;
}
.team .member .member-info {
padding: 10px 15px 20px 15px;
padding: 10px 15px 20px 15px;
}
.team .member .member-info h4 {
font-weight: 700;
margin-bottom: 5px;
font-size: 20px;
color: #012970;
font-weight: 700;
margin-bottom: 5px;
font-size: 20px;
color: #012970;
}
.team .member .member-info span {
display: block;
font-size: 14px;
font-weight: 400;
color: #aaaaaa;
display: block;
font-size: 14px;
font-weight: 400;
color: #aaaaaa;
}
.team .member .member-info p {
font-style: italic;
font-size: 14px;
padding-top: 15px;
line-height: 26px;
color: #5e5e5e;
font-style: italic;
font-size: 14px;
padding-top: 15px;
line-height: 26px;
color: #5e5e5e;
}
.team .member:hover {
transform: scale(1.08);
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
transform: scale(1.08);
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}
.team .member:hover .social {
right: 8px;
opacity: 1;
right: 8px;
opacity: 1;
}
/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients .clients-slider .swiper-slide img {
opacity: 0.5;
transition: 0.3s;
opacity: 0.5;
transition: 0.3s;
}
.clients .clients-slider .swiper-slide img:hover {
opacity: 1;
opacity: 1;
}
.clients .clients-slider .swiper-pagination {
margin-top: 20px;
position: relative;
margin-top: 20px;
position: relative;
}
.clients .clients-slider .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #4154f1;
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
border: 1px solid #4154f1;
}
.clients .clients-slider .swiper-pagination .swiper-pagination-bullet-active {
background-color: #4154f1;
background-color: #4154f1;
}
/*--------------------------------------------------------------
# Recent Blog Posts
--------------------------------------------------------------*/
.recent-blog-posts .post-box {
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
transition: 0.3s;
height: 100%;
overflow: hidden;
padding: 30px;
border-radius: 8px;
position: relative;
display: flex;
flex-direction: column;
box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
transition: 0.3s;
height: 100%;
overflow: hidden;
padding: 30px;
border-radius: 8px;
position: relative;
display: flex;
flex-direction: column;
}
.recent-blog-posts .post-box .post-img {
overflow: hidden;
margin: -30px -30px 15px -30px;
position: relative;
overflow: hidden;
margin: -30px -30px 15px -30px;
position: relative;
}
.recent-blog-posts .post-box .post-img img {
transition: 0.5s;
transition: 0.5s;
}
.recent-blog-posts .post-box .post-date {
font-size: 16px;
font-weight: 600;
color: rgba(1, 41, 112, 0.6);
display: block;
margin-bottom: 10px;
font-size: 16px;
font-weight: 600;
color: rgba(1, 41, 112, 0.6);
display: block;
margin-bottom: 10px;
}
.recent-blog-posts .post-box .post-title {
font-size: 24px;
color: #012970;
font-weight: 700;
margin-bottom: 18px;
position: relative;
transition: 0.3s;
font-size: 24px;
color: #012970;
font-weight: 700;
margin-bottom: 18px;
position: relative;
transition: 0.3s;
}
.recent-blog-posts .post-box .readmore {
display: flex;
align-items: center;
font-weight: 600;
line-height: 1;
transition: 0.3s;
display: flex;
align-items: center;
font-weight: 600;
line-height: 1;
transition: 0.3s;
}
.recent-blog-posts .post-box .readmore i {
line-height: 0;
margin-left: 4px;
font-size: 18px;
line-height: 0;
margin-left: 4px;
font-size: 18px;
}
.recent-blog-posts .post-box:hover .post-title {
color: #4154f1;
color: #4154f1;
}
.recent-blog-posts .post-box:hover .post-img img {
transform: rotate(6deg) scale(1.2);
transform: rotate(6deg) scale(1.2);
}
/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
color: #444444;
background: #fafbff;
padding: 30px;
color: #444444;
background: #fafbff;
padding: 30px;
}
.contact .info-box i {
font-size: 38px;
line-height: 0;
color: #4154f1;
font-size: 38px;
line-height: 0;
color: #4154f1;
}
.contact .info-box h3 {
font-size: 20px;
color: #012970;
font-weight: 700;
margin: 20px 0 10px 0;
font-size: 20px;
color: #012970;
font-weight: 700;
margin: 20px 0 10px 0;
}
.contact .info-box p {
padding: 0;
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
padding: 0;
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
}
.contact .php-email-form {
background: #fafbff;
padding: 30px;
height: 100%;
background: #fafbff;
padding: 30px;
height: 100%;
}
.contact .php-email-form .error-message {
display: none;
color: #fff;
background: #ed3c0d;
text-align: left;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
display: none;
color: #fff;
background: #ed3c0d;
text-align: left;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
}
.contact .php-email-form .sent-message {
display: none;
color: #fff;
background: #18d26e;
text-align: center;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
display: none;
color: #fff;
background: #18d26e;
text-align: center;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
}
.contact .php-email-form .loading {
display: none;
background: #fff;
text-align: center;
padding: 15px;
margin-bottom: 24px;
display: none;
background: #fff;
text-align: center;
padding: 15px;
margin-bottom: 24px;
}
.contact .php-email-form .loading:before {
content: "";
display: inline-block;
border-radius: 50%;
width: 24px;
height: 24px;
margin: 0 10px -6px 0;
border: 3px solid #18d26e;
border-top-color: #eee;
-webkit-animation: animate-loading 1s linear infinite;
animation: animate-loading 1s linear infinite;
}
.contact .php-email-form input, .contact .php-email-form textarea {
border-radius: 0;
box-shadow: none;
font-size: 14px;
border-radius: 0;
content: "";
display: inline-block;
border-radius: 50%;
width: 24px;
height: 24px;
margin: 0 10px -6px 0;
border: 3px solid #18d26e;
border-top-color: #eee;
-webkit-animation: animate-loading 1s linear infinite;
animation: animate-loading 1s linear infinite;
}
.contact .php-email-form input,
.contact .php-email-form textarea {
border-radius: 0;
box-shadow: none;
font-size: 14px;
border-radius: 0;
}
.contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
border-color: #4154f1;
.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
border-color: #4154f1;
}
.contact .php-email-form input {
padding: 10px 15px;
padding: 10px 15px;
}
.contact .php-email-form textarea {
padding: 12px 15px;
padding: 12px 15px;
}
.contact .php-email-form button[type="submit"] {
background: #4154f1;
border: 0;
padding: 10px 30px;
color: #fff;
transition: 0.4s;
border-radius: 4px;
background: #4154f1;
border: 0;
padding: 10px 30px;
color: #fff;
transition: 0.4s;
border-radius: 4px;
}
.contact .php-email-form button[type="submit"]:hover {
background: #5969f3;
background: #5969f3;
}
@-webkit-keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.blog {
padding: 40px 0 20px 0;
padding: 40px 0 20px 0;
}
.blog .entry {
padding: 30px;
margin-bottom: 60px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
padding: 30px;
margin-bottom: 60px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .entry .entry-img {
max-height: 440px;
margin: -30px -30px 20px -30px;
overflow: hidden;
max-height: 440px;
margin: -30px -30px 20px -30px;
overflow: hidden;
}
.blog .entry .entry-title {
font-size: 28px;
font-weight: bold;
padding: 0;
margin: 0 0 20px 0;
font-size: 28px;
font-weight: bold;
padding: 0;
margin: 0 0 20px 0;
}
.blog .entry .entry-title a {
color: #012970;
transition: 0.3s;
color: #012970;
transition: 0.3s;
}
.blog .entry .entry-title a:hover {
color: #4154f1;
color: #4154f1;
}
.blog .entry .entry-meta {
margin-bottom: 15px;
color: #4084fd;
margin-bottom: 15px;
color: #4084fd;
}
.blog .entry .entry-meta ul {
display: flex;
flex-wrap: wrap;
list-style: none;
align-items: center;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
list-style: none;
align-items: center;
padding: 0;
margin: 0;
}
.blog .entry .entry-meta ul li + li {
padding-left: 20px;
.blog .entry .entry-meta ul li+li {
padding-left: 20px;
}
.blog .entry .entry-meta i {
font-size: 16px;
margin-right: 8px;
line-height: 0;
font-size: 16px;
margin-right: 8px;
line-height: 0;
}
.blog .entry .entry-meta a {
color: #777777;
font-size: 14px;
display: inline-block;
line-height: 1;
color: #777777;
font-size: 14px;
display: inline-block;
line-height: 1;
}
.blog .entry .entry-content p {
line-height: 24px;
line-height: 24px;
}
.blog .entry .entry-content .read-more {
-moz-text-align-last: right;
text-align-last: right;
-moz-text-align-last: right;
text-align-last: right;
}
.blog .entry .entry-content .read-more a {
display: inline-block;
background: #4154f1;
color: #fff;
padding: 6px 20px;
transition: 0.3s;
font-size: 14px;
border-radius: 4px;
display: inline-block;
background: #4154f1;
color: #fff;
padding: 6px 20px;
transition: 0.3s;
font-size: 14px;
border-radius: 4px;
}
.blog .entry .entry-content .read-more a:hover {
background: #5969f3;
background: #5969f3;
}
.blog .entry .entry-content h3 {
font-size: 22px;
margin-top: 30px;
font-weight: bold;
font-size: 22px;
margin-top: 30px;
font-weight: bold;
}
.blog .entry .entry-content blockquote {
overflow: hidden;
background-color: #fafafa;
padding: 60px;
position: relative;
text-align: center;
margin: 20px 0;
overflow: hidden;
background-color: #fafafa;
padding: 60px;
position: relative;
text-align: center;
margin: 20px 0;
}
.blog .entry .entry-content blockquote p {
color: #444444;
line-height: 1.6;
margin-bottom: 0;
font-style: italic;
font-weight: 500;
font-size: 22px;
color: #444444;
line-height: 1.6;
margin-bottom: 0;
font-style: italic;
font-weight: 500;
font-size: 22px;
}
.blog .entry .entry-content blockquote::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: #012970;
margin-top: 20px;
margin-bottom: 20px;
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: #012970;
margin-top: 20px;
margin-bottom: 20px;
}
.blog .entry .entry-footer {
padding-top: 10px;
border-top: 1px solid #e6e6e6;
padding-top: 10px;
border-top: 1px solid #e6e6e6;
}
.blog .entry .entry-footer i {
color: #0d64fd;
display: inline;
color: #0d64fd;
display: inline;
}
.blog .entry .entry-footer a {
color: #013289;
transition: 0.3s;
color: #013289;
transition: 0.3s;
}
.blog .entry .entry-footer a:hover {
color: #4154f1;
color: #4154f1;
}
.blog .entry .entry-footer .cats {
list-style: none;
display: inline;
padding: 0 20px 0 0;
font-size: 14px;
list-style: none;
display: inline;
padding: 0 20px 0 0;
font-size: 14px;
}
.blog .entry .entry-footer .cats li {
display: inline-block;
display: inline-block;
}
.blog .entry .entry-footer .tags {
list-style: none;
display: inline;
padding: 0;
font-size: 14px;
list-style: none;
display: inline;
padding: 0;
font-size: 14px;
}
.blog .entry .entry-footer .tags li {
display: inline-block;
display: inline-block;
}
.blog .entry .entry-footer .tags li + li::before {
padding-right: 6px;
color: #6c757d;
content: ",";
.blog .entry .entry-footer .tags li+li::before {
padding-right: 6px;
color: #6c757d;
content: ",";
}
.blog .entry .entry-footer .share {
font-size: 16px;
font-size: 16px;
}
.blog .entry .entry-footer .share i {
padding-left: 5px;
padding-left: 5px;
}
.blog .entry-single {
margin-bottom: 30px;
margin-bottom: 30px;
}
.blog .blog-author {
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .blog-author img {
width: 120px;
margin-right: 20px;
width: 120px;
margin-right: 20px;
}
.blog .blog-author h4 {
font-weight: 600;
font-size: 22px;
margin-bottom: 0px;
padding: 0;
color: #012970;
font-weight: 600;
font-size: 22px;
margin-bottom: 0px;
padding: 0;
color: #012970;
}
.blog .blog-author .social-links {
margin: 0 10px 10px 0;
margin: 0 10px 10px 0;
}
.blog .blog-author .social-links a {
color: rgba(1, 41, 112, 0.5);
margin-right: 5px;
color: rgba(1, 41, 112, 0.5);
margin-right: 5px;
}
.blog .blog-author p {
font-style: italic;
color: #b7b7b7;
font-style: italic;
color: #b7b7b7;
}
.blog .blog-comments {
margin-bottom: 30px;
margin-bottom: 30px;
}
.blog .blog-comments .comments-count {
font-weight: bold;
font-weight: bold;
}
.blog .blog-comments .comment {
margin-top: 30px;
position: relative;
margin-top: 30px;
position: relative;
}
.blog .blog-comments .comment .comment-img {
margin-right: 14px;
margin-right: 14px;
}
.blog .blog-comments .comment .comment-img img {
width: 60px;
width: 60px;
}
.blog .blog-comments .comment h5 {
font-size: 16px;
margin-bottom: 2px;
font-size: 16px;
margin-bottom: 2px;
}
.blog .blog-comments .comment h5 a {
font-weight: bold;
color: #444444;
transition: 0.3s;
font-weight: bold;
color: #444444;
transition: 0.3s;
}
.blog .blog-comments .comment h5 a:hover {
color: #4154f1;
color: #4154f1;
}
.blog .blog-comments .comment h5 .reply {
padding-left: 10px;
color: #012970;
padding-left: 10px;
color: #012970;
}
.blog .blog-comments .comment h5 .reply i {
font-size: 20px;
font-size: 20px;
}
.blog .blog-comments .comment time {
display: block;
font-size: 14px;
color: #013ca3;
margin-bottom: 5px;
display: block;
font-size: 14px;
color: #013ca3;
margin-bottom: 5px;
}
.blog .blog-comments .comment.comment-reply {
padding-left: 40px;
padding-left: 40px;
}
.blog .blog-comments .reply-form {
margin-top: 30px;
padding: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
margin-top: 30px;
padding: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .blog-comments .reply-form h4 {
font-weight: bold;
font-size: 22px;
font-weight: bold;
font-size: 22px;
}
.blog .blog-comments .reply-form p {
font-size: 14px;
font-size: 14px;
}
.blog .blog-comments .reply-form input {
border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
}
.blog .blog-comments .reply-form input:focus {
box-shadow: none;
border-color: #a0aaf8;
box-shadow: none;
border-color: #a0aaf8;
}
.blog .blog-comments .reply-form textarea {
border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
}
.blog .blog-comments .reply-form textarea:focus {
box-shadow: none;
border-color: #a0aaf8;
box-shadow: none;
border-color: #a0aaf8;
}
.blog .blog-comments .reply-form .form-group {
margin-bottom: 25px;
margin-bottom: 25px;
}
.blog .blog-comments .reply-form .btn-primary {
border-radius: 4px;
padding: 10px 20px;
border: 0;
background-color: #012970;
border-radius: 4px;
padding: 10px 20px;
border: 0;
background-color: #012970;
}
.blog .blog-comments .reply-form .btn-primary:hover {
background-color: #013289;
background-color: #013289;
}
.blog .blog-pagination {
color: #024ed5;
color: #024ed5;
}
.blog .blog-pagination ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
.blog .blog-pagination li {
margin: 0 5px;
transition: 0.3s;
margin: 0 5px;
transition: 0.3s;
}
.blog .blog-pagination li a {
color: #012970;
padding: 7px 16px;
display: flex;
align-items: center;
justify-content: center;
color: #012970;
padding: 7px 16px;
display: flex;
align-items: center;
justify-content: center;
}
.blog .blog-pagination li.active, .blog .blog-pagination li:hover {
background: #4154f1;
.blog .blog-pagination li.active,
.blog .blog-pagination li:hover {
background: #4154f1;
}
.blog .blog-pagination li.active a, .blog .blog-pagination li:hover a {
color: #fff;
.blog .blog-pagination li.active a,
.blog .blog-pagination li:hover a {
color: #fff;
}
.blog .sidebar {
padding: 30px;
margin: 0 0 60px 20px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
padding: 30px;
margin: 0 0 60px 20px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog .sidebar .sidebar-title {
font-size: 20px;
font-weight: 700;
padding: 0 0 0 0;
margin: 0 0 15px 0;
color: #012970;
position: relative;
font-size: 20px;
font-weight: 700;
padding: 0 0 0 0;
margin: 0 0 15px 0;
color: #012970;
position: relative;
}
.blog .sidebar .sidebar-item {
margin-bottom: 30px;
margin-bottom: 30px;
}
.blog .sidebar .search-form form {
background: #fff;
border: 1px solid #ddd;
padding: 3px 10px;
position: relative;
background: #fff;
border: 1px solid #ddd;
padding: 3px 10px;
position: relative;
}
.blog .sidebar .search-form form input[type="text"] {
border: 0;
padding: 4px;
border-radius: 4px;
width: calc(100% - 40px);
border: 0;
padding: 4px;
border-radius: 4px;
width: calc(100% - 40px);
}
.blog .sidebar .search-form form button {
position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
background: none;
font-size: 16px;
padding: 0 15px;
margin: -1px;
background: #4154f1;
color: #fff;
transition: 0.3s;
border-radius: 0 4px 4px 0;
line-height: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
background: none;
font-size: 16px;
padding: 0 15px;
margin: -1px;
background: #4154f1;
color: #fff;
transition: 0.3s;
border-radius: 0 4px 4px 0;
line-height: 0;
}
.blog .sidebar .search-form form button i {
line-height: 0;
line-height: 0;
}
.blog .sidebar .search-form form button:hover {
background: #5465f2;
background: #5465f2;
}
.blog .sidebar .categories ul {
list-style: none;
padding: 0;
list-style: none;
padding: 0;
}
.blog .sidebar .categories ul li + li {
padding-top: 10px;
.blog .sidebar .categories ul li+li {
padding-top: 10px;
}
.blog .sidebar .categories ul a {
color: #012970;
transition: 0.3s;
color: #012970;
transition: 0.3s;
}
.blog .sidebar .categories ul a:hover {
color: #4154f1;
color: #4154f1;
}
.blog .sidebar .categories ul a span {
padding-left: 5px;
color: #aaaaaa;
font-size: 14px;
padding-left: 5px;
color: #aaaaaa;
font-size: 14px;
}
.blog .sidebar .recent-posts .post-item + .post-item {
margin-top: 15px;
.blog .sidebar .recent-posts .post-item+.post-item {
margin-top: 15px;
}
.blog .sidebar .recent-posts img {
width: 80px;
float: left;
width: 80px;
float: left;
}
.blog .sidebar .recent-posts h4 {
font-size: 15px;
margin-left: 95px;
font-weight: bold;
font-size: 15px;
margin-left: 95px;
font-weight: bold;
}
.blog .sidebar .recent-posts h4 a {
color: #012970;
transition: 0.3s;
color: #012970;
transition: 0.3s;
}
.blog .sidebar .recent-posts h4 a:hover {
color: #4154f1;
color: #4154f1;
}
.blog .sidebar .recent-posts time {
display: block;
margin-left: 95px;
font-style: italic;
font-size: 14px;
color: #aaaaaa;
display: block;
margin-left: 95px;
font-style: italic;
font-size: 14px;
color: #aaaaaa;
}
.blog .sidebar .tags {
margin-bottom: -10px;
margin-bottom: -10px;
}
.blog .sidebar .tags ul {
list-style: none;
padding: 0;
list-style: none;
padding: 0;
}
.blog .sidebar .tags ul li {
display: inline-block;
display: inline-block;
}
.blog .sidebar .tags ul a {
color: #0257ee;
font-size: 14px;
padding: 6px 14px;
margin: 0 6px 8px 0;
border: 1px solid #d7e6ff;
display: inline-block;
transition: 0.3s;
color: #0257ee;
font-size: 14px;
padding: 6px 14px;
margin: 0 6px 8px 0;
border: 1px solid #d7e6ff;
display: inline-block;
transition: 0.3s;
}
.blog .sidebar .tags ul a:hover {
color: #fff;
border: 1px solid #4154f1;
background: #4154f1;
color: #fff;
border: 1px solid #4154f1;
background: #4154f1;
}
.blog .sidebar .tags ul a span {
padding-left: 5px;
color: #a5c5fe;
font-size: 14px;
padding-left: 5px;
color: #a5c5fe;
font-size: 14px;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
background: #f6f9ff;
padding: 0 0 30px 0;
font-size: 14px;
background: #f6f9ff;
padding: 0 0 30px 0;
font-size: 14px;
}
.footer .footer-newsletter {
padding: 50px 0;
background: #f6f9ff;
border-top: 1px solid #e1ecff;
padding: 50px 0;
background: #f6f9ff;
border-top: 1px solid #e1ecff;
}
.footer .footer-newsletter h4 {
font-size: 24px;
margin: 0 0 10px 0;
padding: 0;
line-height: 1;
font-weight: 700;
color: #012970;
font-size: 24px;
margin: 0 0 10px 0;
padding: 0;
line-height: 1;
font-weight: 700;
color: #012970;
}
.footer .footer-newsletter form {
margin-top: 20px;
background: #fff;
padding: 6px 10px;
position: relative;
border-radius: 4px;
border: 1px solid #e1ecff;
margin-top: 20px;
background: #fff;
padding: 6px 10px;
position: relative;
border-radius: 4px;
border: 1px solid #e1ecff;
}
.footer .footer-newsletter form input[type="email"] {
border: 0;
padding: 8px;
width: calc(100% - 140px);
border: 0;
padding: 8px;
width: calc(100% - 140px);
}
.footer .footer-newsletter form input[type="submit"] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
background: none;
font-size: 16px;
padding: 0 30px;
margin: 3px;
background: #4154f1;
color: #fff;
transition: 0.3s;
border-radius: 4px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
background: none;
font-size: 16px;
padding: 0 30px;
margin: 3px;
background: #4154f1;
color: #fff;
transition: 0.3s;
border-radius: 4px;
}
.footer .footer-newsletter form input[type="submit"]:hover {
background: #5969f3;
background: #5969f3;
}
.footer .footer-top {
background: white url(../img/footer-bg.png) no-repeat right top;
background-size: contain;
border-top: 1px solid #e1ecff;
border-bottom: 1px solid #e1ecff;
padding: 60px 0 30px 0;
background: white url(../img/footer-bg.png) no-repeat right top;
background-size: contain;
border-top: 1px solid #e1ecff;
border-bottom: 1px solid #e1ecff;
padding: 60px 0 30px 0;
}
@media (max-width: 992px) {
.footer .footer-top {
background-position: center bottom;
}
.footer .footer-top {
background-position: center bottom;
}
}
.footer .footer-top .footer-info {
margin-bottom: 30px;
margin-bottom: 30px;
}
.footer .footer-top .footer-info .logo {
line-height: 0;
margin-bottom: 15px;
line-height: 0;
margin-bottom: 15px;
}
.footer .footer-top .footer-info .logo img {
max-height: 40px;
margin-right: 6px;
max-height: 40px;
margin-right: 6px;
}
.footer .footer-top .footer-info .logo span {
font-size: 30px;
font-weight: 700;
letter-spacing: 1px;
color: #012970;
font-family: "Nunito", sans-serif;
margin-top: 3px;
font-size: 30px;
font-weight: 700;
letter-spacing: 1px;
color: #012970;
font-family: "Nunito", sans-serif;
margin-top: 3px;
}
.footer .footer-top .footer-info p {
font-size: 14px;
line-height: 24px;
margin-bottom: 0;
font-family: "Nunito", sans-serif;
font-size: 14px;
line-height: 24px;
margin-bottom: 0;
font-family: "Nunito", sans-serif;
}
.footer .footer-top .social-links a {
font-size: 20px;
display: inline-block;
color: rgba(1, 41, 112, 0.5);
line-height: 0;
margin-right: 10px;
transition: 0.3s;
font-size: 20px;
display: inline-block;
color: rgba(1, 41, 112, 0.5);
line-height: 0;
margin-right: 10px;
transition: 0.3s;
}
.footer .footer-top .social-links a:hover {
color: #012970;
color: #012970;
}
.footer .footer-top h4 {
font-size: 16px;
font-weight: bold;
color: #012970;
text-transform: uppercase;
position: relative;
padding-bottom: 12px;
font-size: 16px;
font-weight: bold;
color: #012970;
text-transform: uppercase;
position: relative;
padding-bottom: 12px;
}
.footer .footer-top .footer-links {
margin-bottom: 30px;
margin-bottom: 30px;
}
.footer .footer-top .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
list-style: none;
padding: 0;
margin: 0;
}
.footer .footer-top .footer-links ul i {
padding-right: 2px;
color: #d0d4fc;
font-size: 12px;
line-height: 0;
padding-right: 2px;
color: #d0d4fc;
font-size: 12px;
line-height: 0;
}
.footer .footer-top .footer-links ul li {
padding: 10px 0;
display: flex;
align-items: center;
padding: 10px 0;
display: flex;
align-items: center;
}
.footer .footer-top .footer-links ul li:first-child {
padding-top: 0;
padding-top: 0;
}
.footer .footer-top .footer-links ul a {
color: #013289;
transition: 0.3s;
display: inline-block;
line-height: 1;
color: #013289;
transition: 0.3s;
display: inline-block;
line-height: 1;
}
.footer .footer-top .footer-links ul a:hover {
color: #4154f1;
color: #4154f1;
}
.footer .footer-top .footer-contact p {
line-height: 26px;
line-height: 26px;
}
.footer .copyright {
text-align: center;
padding-top: 30px;
color: #012970;
text-align: center;
padding-top: 30px;
color: #012970;
}
.footer .credits {
padding-top: 10px;
text-align: center;
font-size: 13px;
color: #012970;
}
padding-top: 10px;
text-align: center;
font-size: 13px;
color: #012970;
}
\ No newline at end of file
public/SCD/assets/img/200127_Luftstroemung.jpg 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/200127_Luftstroemung.jpg

949 KB

public/SCD/assets/img/DreeSoDemonstrator.png 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/DreeSoDemonstrator.png

195 KB

public/SCD/assets/img/DreeSoDemonstrator2.png 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/DreeSoDemonstrator2.png

54.9 KB

public/SCD/assets/img/DreeSoDemonstrator3.png 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/DreeSoDemonstrator3.png

12.4 KB

public/SCD/assets/img/Iris3.jpg 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/Iris3.jpg

50.8 KB

public/SCD/assets/img/SmartCity.jpg 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/SmartCity.jpg

872 KB

public/SCD/assets/img/dummy.png 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/dummy.png

168 Bytes

public/SCD/assets/img/favicon-32x32.png 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/favicon-32x32.png

562 Bytes

public/SCD/assets/img/favicon.ico 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/favicon.ico

15 KB

public/SCD/assets/img/icityLogo.jpg 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/icityLogo.jpg

80.6 KB

public/SCD/assets/img/icityThemes.png 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/icityThemes.png

2.73 MB

public/SCD/assets/img/intelligent.jpg 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/intelligent.jpg

4.54 MB

public/SCD/assets/img/livable.jpg 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/livable.jpg

243 KB

public/SCD/assets/img/server-rack.jpg 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/server-rack.jpg

2.97 MB

public/SCD/assets/img/sustainable.jpg 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/sustainable.jpg

756 KB

public/SCD/assets/img/windturbines.jpg 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/windturbines.jpg

1.07 MB

public/SCD/assets/img/workspace.jpg 0 → 100644
+ 0
- 0
View file @ 8ce45e4a
public/SCD/assets/img/workspace.jpg

3.24 MB

public/SCD/index.html
+ 697
- 630
View file @ 8ce45e4a
......@@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>City Demonstrator Landing Page</title>
<title>iCity Demonstrator</title>
<meta content="" name="description">
<meta content="" name="keywords">
......@@ -40,70 +40,87 @@
<!-- ======= Header ======= -->
<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="col-sm-6 d-flex flex-column justify-content-center">
<div class="row">
<div class="col-lg-1 col-md-2 col-sm-2 ">
<img src="assets/img/dummy.png" alt="">
</div>
<div class="col-lg-5 col-md-4 col-sm-4">
<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>City Demonstrator</span>
</a>
</div>
<nav id="navbar" class="navbar">
<!-- <ul>
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#services">Services</a></li>
<li><a class="nav-link scrollto" href="#portfolio">Portfolio</a></li>
<li><a class="nav-link scrollto" href="#team">Team</a></li>
<li><a href="blog.html">Blog</a></li>
<li class="dropdown"><a href="#"><span>Drop Down</span> <i class="bi bi-chevron-down"></i></a>
<div class="col-lg-5 col-md-4 col-sm-4 ">
<span style="float: right;">
<img src="https://www.dreso.com/typo3conf/ext/dreso/Resources/Public/dreso-logo.svg " style="width: 160px; padding-right:20px;" alt=" ">
<img src="assets/img/icityLogo.jpg " style="width: 130px; " alt=" ">
</span>
</div>
<div class="col-lg-1 col-md-2 col-sm-1">
<img src="assets/img/dummy.png" alt="">
</div>
</div>
<!-- <nav id="navbar " class="navbar ">
<ul>
<li><a class="nav-link scrollto active " href="#hero ">Home</a></li>
<li><a class="nav-link scrollto " href="#about ">About</a></li>
<li><a class="nav-link scrollto " href="#services ">Services</a></li>
<li><a class="nav-link scrollto " href="#portfolio ">Portfolio</a></li>
<li><a class="nav-link scrollto " href="#team ">Team</a></li>
<li><a href="blog.html ">Blog</a></li>
<li class="dropdown "><a href="# "><span>Drop Down</span> <i class="bi bi-chevron-down "></i></a>
<ul>
<li><a href="#">Drop Down 1</a></li>
<li class="dropdown"><a href="#"><span>Deep Drop Down</span> <i class="bi bi-chevron-right"></i></a>
<li><a href="# ">Drop Down 1</a></li>
<li class="dropdown "><a href="# "><span>Deep Drop Down</span> <i class="bi bi-chevron-right "></i></a>
<ul>
<li><a href="#">Deep Drop Down 1</a></li>
<li><a href="#">Deep Drop Down 2</a></li>
<li><a href="#">Deep Drop Down 3</a></li>
<li><a href="#">Deep Drop Down 4</a></li>
<li><a href="#">Deep Drop Down 5</a></li>
<li><a href="# ">Deep Drop Down 1</a></li>
<li><a href="# ">Deep Drop Down 2</a></li>
<li><a href="# ">Deep Drop Down 3</a></li>
<li><a href="# ">Deep Drop Down 4</a></li>
<li><a href="# ">Deep Drop Down 5</a></li>
</ul>
</li>
<li><a href="#">Drop Down 2</a></li>
<li><a href="#">Drop Down 3</a></li>
<li><a href="#">Drop Down 4</a></li>
<li><a href="# ">Drop Down 2</a></li>
<li><a href="# ">Drop Down 3</a></li>
<li><a href="# ">Drop Down 4</a></li>
</ul>
</li>
<li><a class="nav-link scrollto" href="#contact">Contact</a></li>
<!-- <li><a class="getstarted scrollto" href="#about">Get Started</a></li> -->
<!-- </ul> -->
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>
<!-- .navbar -->
</div>
<li><a class="nav-link scrollto " href="#contact ">Contact</a></li>
<li><a class="getstarted scrollto " href="#about ">Get Started</a></li>
</ul> -->
<i class="bi bi-list mobile-nav-toggle "></i>
<!-- </nav> -->
<!-- .navbar -->
<!-- </div> -->
</header>
<!-- End Header -->
<!-- ======= Hero Section ======= -->
<section id="hero" class="hero d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-lg-6 d-flex flex-column justify-content-center">
<h1 data-aos="fade-up">Learn more about Smart Cities with our City Demonstrator</h1>
<h2 data-aos="fade-up" data-aos-delay="400">Find out what Smart Cities are and how they will shape our future</h2>
<div data-aos="fade-up" data-aos-delay="600">
<section id="hero " class="hero d-flex align-items-center ">
<div class="container ">
<div class="row ">
<div class="col-lg-6 d-flex flex-column justify-content-center ">
<h1 data-aos="fade-up ">Learn more about Intelligent Cities with our City Demonstrator</h1>
<h2 data-aos="fade-up " data-aos-delay="400 ">Find out what Intelligent Cities are and how they will shape our future</h2>
<div data-aos="fade-up " data-aos-delay="600 ">
<div class="text-center text-lg-start">
<a href="#about" class="btn-get-started scrollto d-inline-flex align-items-center justify-content-center align-self-center">
<a href="#about" class="btn-get-started d-inline-flex align-items-center justify-content-center align-self-center ">
<span>Get Started</span>
<i class="bi bi-arrow-right"></i>
<i class="bi bi-arrow-right "></i>
</a>
</div>
</div>
</div>
<div class="col-lg-6 hero-img" data-aos="zoom-out" data-aos-delay="200">
<img src="assets/img/ict.png" class="img-fluid" alt="">
<div class="col-lg-6 hero-img" data-aos="zoom-out " data-aos-delay="200 ">
<img src="assets/img/ict.png " class="img-fluid " alt=" ">
</div>
</div>
</div>
......@@ -111,17 +128,17 @@
</section>
<!-- End Hero -->
<main id="main">
<main id="main ">
<!-- ======= About Section ======= -->
<section id="about" class="about">
<div class="container" data-aos="fade-up">
<div class="row gx-0">
<div class="container " data-aos="fade-up ">
<div class="row gx-0 ">
<div class="col-lg-6 d-flex flex-column justify-content-center" data-aos="fade-up" data-aos-delay="200">
<div class="content">
<div class="col-lg-6 d-flex flex-column justify-content-center " data-aos="fade-up " data-aos-delay="200 ">
<div class="content ">
<h3>Our Vision</h3>
<h2>Re-invent our cities of today to become sustainable, resource efficient and enable digital services to smart citizens of tomorrow.
<h2>Re-invent our cities of today to become sustainable, resource efficient and enable digital services to intelligent citizens of tomorrow.
</h2>
<p></p>
......@@ -130,16 +147,16 @@
<p>For example: traffic, mobility concepts, building-infrastructures, air-pollution, currently created electricity via PV systems and many more.
</p>
<div class="text-center text-lg-start">
<a href="#features" class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center">
<a href="#features" class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center ">
<span>Read More</span>
<i class="bi bi-arrow-right"></i>
<i class="bi bi-arrow-right "></i>
</a>
</div>
</div>
</div>
<div class="col-lg-6 d-flex align-items-center" data-aos="zoom-out" data-aos-delay="200">
<img src="assets/img/smartcity_wheel-1024x1024.jpg" class="img-fluid" alt="">
<div class="col-lg-6 d-flex align-items-center " data-aos="zoom-out " data-aos-delay="200 ">
<img src="assets/img/smartcity_wheel-1024x1024.jpg " class="img-fluid " alt=" ">
</div>
</div>
......@@ -151,206 +168,331 @@
<!-- ======= Features Section ======= -->
<section id="features" class="features">
<section id="features" class="features ">
<div class="container" data-aos="fade-up">
<div class="container " data-aos="fade-up ">
<header class="section-header">
<header class="section-header ">
<h2>Features</h2>
<p>Features of a smart city</p>
<p>Features of a intelligent city</p>
</header>
<div class="row">
<div class="row ">
<div class="col-lg-6">
<img src="assets/img/icity.jpg" class="img-fluid" alt="">
<div class="col-lg-6 ">
<!-- <img src="assets/img/icity.jpg " class="img-fluid " alt=" "> -->
<img src="assets/img/icityThemes.png" class="img-fluid " alt=" ">
</div>
<div class="col-lg-6 mt-5 mt-lg-0 d-flex">
<div class="row align-self-center gy-4">
<div class="col-lg-6 mt-5 mt-lg-0 d-flex ">
<div class="row align-self-center gy-4 ">
<div class="col-md-6" data-aos="zoom-out" data-aos-delay="200">
<div class="feature-box d-flex align-items-center">
<i class="bi bi-check"></i>
<div class="col-md-6 " data-aos="zoom-out " data-aos-delay="200 ">
<div class="feature-box d-flex align-items-center ">
<i class="bi bi-check "></i>
<h3>Intelligent citizens</h3>
</div>
</div>
<div class="col-md-6" data-aos="zoom-out" data-aos-delay="300">
<div class="feature-box d-flex align-items-center">
<i class="bi bi-check"></i>
<h3>Intelligent transportation</h3>
<div class="col-md-6 " data-aos="zoom-out " data-aos-delay="300 ">
<div class="feature-box d-flex align-items-center ">
<i class="bi bi-check "></i>
<h3>Renewable energies</h3>
</div>
</div>
<div class="col-md-6" data-aos="zoom-out" data-aos-delay="400">
<div class="feature-box d-flex align-items-center">
<i class="bi bi-check"></i>
<div class="col-md-6 " data-aos="zoom-out " data-aos-delay="400 ">
<div class="feature-box d-flex align-items-center ">
<i class="bi bi-check "></i>
<h3>Innovative mobility concepts</h3>
</div>
</div>
<div class="col-md-6" data-aos="zoom-out" data-aos-delay="500">
<div class="feature-box d-flex align-items-center">
<i class="bi bi-check"></i>
<div class="col-md-6 " data-aos="zoom-out " data-aos-delay="500 ">
<div class="feature-box d-flex align-items-center ">
<i class="bi bi-check "></i>
<h3>Interconnected devices and services</h3>
</div>
</div>
<div class="col-md-6" data-aos="zoom-out" data-aos-delay="600">
<div class="feature-box d-flex align-items-center">
<i class="bi bi-check"></i>
<h3>Green spaces</h3>
<div class="col-md-6 " data-aos="zoom-out " data-aos-delay="600 ">
<div class="feature-box d-flex align-items-center ">
<i class="bi bi-check "></i>
<h3>Urban environment</h3>
</div>
</div>
<div class="col-md-6" data-aos="zoom-out" data-aos-delay="700">
<div class="feature-box d-flex align-items-center">
<i class="bi bi-check"></i>
<h3>Reduced and intelligent traffic</h3>
<div class="col-md-6 " data-aos="zoom-out " data-aos-delay="700 ">
<div class="feature-box d-flex align-items-center ">
<i class="bi bi-check "></i>
<h3>Sustainable buildings and neighborhoods</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-12 " style="justify-content: center; " id=featiretab-arrow>
<a href="#featiretab-arrow " class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center " style="padding-left: 50%; padding-top: 50px; ">
<!-- <span>more</span> -->
<i class="bi bi-arrow-down " style="font-size: 40px "></i>
</a>
</div>
</div>
<!-- / row -->
<!-- Feature Tabs -->
<div class="row feture-tabs" data-aos="fade-up">
<div class="col-lg-6">
<h3>The three fundamental aspects of smart cities: LIS</h3>
<!-- Feature Tabs ======== LIVABLE ======== -->
<div class="row feture-tabs " data-aos="fade-up ">
<header class="section-header ">
<p>The three fundamental aspects of intelligent cities: LIS</p>
<p class="nav-link active " data-bs-toggle="pill " href="#tab1 ">livable</p>
</header>
<div class="col-lg-6 ">
<!-- Tabs -->
<ul class="nav nav-pills mb-3">
<li>
<a class="nav-link active" data-bs-toggle="pill" href="#tab1">livable</a>
</li>
<li>
<a class="nav-link" data-bs-toggle="pill" href="#tab2">intelligent</a>
</li>
<!-- <ul class="nav nav-pills mb-3 ">
<li>
<a class="nav-link" data-bs-toggle="pill" href="#tab3">sustainable</a>
<a class="nav-link active " data-bs-toggle="pill " href="#tab1 ">livable</a>
</li>
</ul>
</ul> -->
<!-- End Tabs -->
<!-- Tab Content -->
<div class="tab-content">
<div class="tab-content ">
<div class="tab-pane fade show active" id="tab1">
<div class="tab-pane fade show active " id="livable ">
<p>Cities should become a place where citizens can easily meet each other in green spaces using intelligent mobility concepts</p>
<div class="d-flex align-items-center mb-2">
<i class="bi bi-check2"></i>
<h4>Smart Mobility for Smart Citizens</h4>
<div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2 "></i>
<h4>Intelligent Mobility for Intelligent Citizens</h4>
</div>
<p>For example, finding the perfect route for E-bikes / E-scouters based on fitness level and heart-rate of the user and the battery charge level of the bike. </p>
<div class="d-flex align-items-center mb-2">
<i class="bi bi-check2"></i>
<div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2 "></i>
<h4>Green spaces and natural environment</h4>
</div>
<p>Green spaces may be watered automatically using conditioned rain and or gray water during dry periods. Information about soil dryness and nutritional status is measured using IoT devices.</p>
<div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2 "></i>
<h4>Actor-centric neighborhood development</h4>
</div>
<p>Neighborhoods and infills are designed according to the needs of future residents in terms of floor-plan types and sizes, auxiliary functions and retail as well as smart services for mobility, utilities, retail and social
organization.
</p>
</div>
<!-- End Tab 1 Content -->
</div>
</div>
<div class="col-lg-6 ">
<img src="assets/img/livable.jpg " class="img-fluid " alt=" ">
<!-- <img src="assets/img/200127_Luftstroemung.jpg " class="img-fluid " alt=" "> -->
</div>
<div class="col-lg-12 " style="justify-content: center; " id=intelligent-arrow>
<a href="#intelligent-arrow " class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center " style="padding-left: 50%; padding-top: 50px; ">
<!-- <span>more</span> -->
<i class="bi bi-arrow-down " style="font-size: 40px "></i>
</a>
</div>
</div>
<!-- End Feature Tabs ======== LIVABLE ======== -->
<!-- Feature Tabs ======== INTELLIGENT ======== -->
<div id="intelligent-top " class="row feture-tabs " data-aos="fade-up ">
<header class="section-header ">
<p class="nav-link active " data-bs-toggle="pill ">intelligent</p>
</header>
<div class="col-lg-6 ">
<!-- <img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Forschung/_processed_/3/a/csm_iCity_bubbles_HFT_Stadt_ce4e80930c.png " class="img-fluid " alt=" "> -->
<img src="assets/img/intelligent.jpg " class="img-fluid " style="height: 400px;" alt=" ">
</div>
<div class="tab-pane fade show" id="tab2">
<div class="col-lg-6 ">
<!-- <h3>The three fundamental aspects of smart cities: LIS</h3> -->
<!-- Tabs -->
<!-- <ul class="nav nav-pills mb-3 ">
<li>
<a class="nav-link active " data-bs-toggle="pill " href="#tab1 ">intelligent</a>
</li>
</ul> -->
<!-- End Tabs -->
<!-- Tab Content -->
<div class="tab-content ">
<div class="tab-pane fade show active " id="intelligent ">
<p>Connecting a variaty of sensors and devices will make cities more accessible, easier to navigate in and learn about the surroundings (e.g. current wind or air pollution) </p>
<div class="d-flex align-items-center mb-2">
<i class="bi bi-check2"></i>
<h4>Smart cities need intelligent people</h4>
<div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2 "></i>
<h4>Intelligent cities need intelligent people</h4>
</div>
<p>The human factor has an enormous impact on the development of a city, thus people need to be given the data and should be empowered to contriubte intelligently </p>
<div class="d-flex align-items-center mb-2">
<i class="bi bi-check2"></i>
<div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2 "></i>
<h4>Intelligent data storage and distribution</h4>
</div>
<p>While a plethora of data is being collected, it is even more important to disect, seperate and store data in processable junks to ensures data security and privacy of citizens.</p>
<div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2 "></i>
<h4>Intelligent operation of utilities and infrastructure
</h4>
</div>
<p>Information makes it easier and more efficient for suppliers of electricity, mobility, communication technology, water, etc. to match peaks of production with peaks and lows of demand. Building information modelling allows
operators to repair and maintain physical assets more efficiently.
</p>
</div>
<!-- End Tab 2 Content -->
<!-- End Tab 1 Content -->
</div>
</div>
<div class="col-lg-12 " style="justify-content: center; " id=sustainable-arrow>
<a href="#sustainable-arrow " class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center " style="padding-left: 50%; padding-top: 50px; ">
<!-- <span>more</span> -->
<i class="bi bi-arrow-down " style="font-size: 40px "></i>
</a>
</div>
</div>
<!-- End Feature Tabs ======== INTELLIGENT ======== -->
<div class="tab-pane fade show" id="tab3">
<!-- Feature Tabs ======== SUSTAIABLE ======== -->
<div id="sustainable-top " class="row feture-tabs " data-aos="fade-up ">
<header class="section-header ">
<p class="nav-link active " data-bs-toggle="pill " href="#tab1 ">sustainable</p>
</header>
<div class="col-lg-6 ">
<!-- Tabs -->
<!-- <ul class="nav nav-pills mb-3 ">
<li>
<a class="nav-link active " data-bs-toggle="pill " href="#tab1 ">livable</a>
</li>
</ul> -->
<!-- End Tabs -->
<!-- Tab Content -->
<div class="tab-content ">
<div class="tab-pane fade show active " id="sustainable ">
<p>Tomorrow's city spends its resources carefully. This means that resources need to be collected, measured, conserved and used at the right time and place.</p>
<div class="d-flex align-items-center mb-2">
<i class="bi bi-check2"></i>
<h4>Quality of live is at the heart of smart cities and citizens foster it </h4>
<div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2 "></i>
<h4>Quality of live is at the heart of intelligent cities and citizens foster it </h4>
</div>
<p>Modern cities provide more green spaces and natural environments to live and spend quality time with friends and family.</p>
<div class="d-flex align-items-center mb-2">
<i class="bi bi-check2"></i>
<div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2 "></i>
<h4>Live like there is no tomorrow - reduce your carbon foot print</h4>
</div>
<p>By visualizing air pollution and CO2 concentration as well as wind flows of the city using 3D web-applications, citizens may be more sensitive to their behavior and are easiert incentivized to use environmentally friendly
modes of transportation.</p>
</div>
<!-- End Tab 3 Content -->
<div class="d-flex align-items-center mb-2 ">
<i class="bi bi-check2 "></i>
<h4>Cradle 2 Cradle</h4>
</div>
<p>A material cadaster for buildings and infrastructure keeps track of materials like copper and steel that are used in buildings and become raw materials at the end of the buildings service life. </p>
</div>
<!-- End Tab 1 Content -->
</div>
</div>
<div class="col-lg-6">
<img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Forschung/_processed_/3/a/csm_iCity_bubbles_HFT_Stadt_ce4e80930c.png" class="img-fluid" alt="">
<div class="col-lg-6 ">
<!-- <img src="assets/img/sustainable.jpg " class="img-fluid " alt=" "> -->
<img src="assets/img/200127_Luftstroemung.jpg " class="img-fluid " alt=" ">
</div>
<div class="col-lg-12 " style="justify-content: center; " id=featureicon-arrow>
<a href="#featureicon-arrow " class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center " style="padding-left: 50%; padding-top: 50px; ">
<!-- <span>more</span> -->
<i class="bi bi-arrow-down " style="font-size: 50px "></i>
</a>
</div>
</div>
<!-- End Feature Tabs -->
<!-- End Feature Tabs ======== LIVABLE ======== -->
<!-- Feature Icons -->
<div class="row feature-icons" data-aos="fade-up">
<!-- <div class="row feature-icons " data-aos="fade-up ">
<h3></h3>
<div class="row">
<div class="row ">
<div class="col-xl-4 text-center" data-aos="fade-right" data-aos-delay="100">
<img src="assets/img/features-3.png" class="img-fluid p-4" alt="">
</div>
<div class="col-xl-4 text-center " data-aos="fade-right " data-aos-delay="100 ">
<!-- <img src="assets/img/features-3.png " class="img-fluid p-4 " alt=" "> -->
<!-- <img src="assets/img/workspace.jpg " class="img-fluid p-4 " alt=" ">
</div>
<div class="col-xl-8 d-flex content">
<div class="row align-self-center gy-4">
<div class="col-xl-8 d-flex content ">
<div class="row align-self-center gy-4 ">
<div class="col-md-6 icon-box" data-aos="fade-up">
<i class="ri-line-chart-line"></i>
<div class="col-md-6 icon-box " data-aos="fade-up ">
<i class="ri-line-chart-line "></i>
<div>
<h4>Corporis voluptates sit</h4>
<p>Consequuntur sunt aut quasi enim aliquam quae harum pariatur laboris nisi ut aliquip</p>
</div>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
<i class="ri-stack-line"></i>
<div class="col-md-6 icon-box " data-aos="fade-up " data-aos-delay="100 ">
<i class="ri-stack-line "></i>
<div>
<h4>Ullamco laboris nisi</h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt</p>
</div>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">
<i class="ri-brush-4-line"></i>
<div class="col-md-6 icon-box " data-aos="fade-up " data-aos-delay="200 ">
<i class="ri-brush-4-line "></i>
<div>
<h4>Labore consequatur</h4>
<p>Aut suscipit aut cum nemo deleniti aut omnis. Doloribus ut maiores omnis facere</p>
</div>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="300">
<i class="ri-magic-line"></i>
<div class="col-md-6 icon-box " data-aos="fade-up " data-aos-delay="300 ">
<i class="ri-magic-line "></i>
<div>
<h4>Beatae veritatis</h4>
<p>Expedita veritatis consequuntur nihil tempore laudantium vitae denat pacta</p>
</div>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="400">
<i class="ri-command-line"></i>
<div class="col-md-6 icon-box " data-aos="fade-up " data-aos-delay="400 ">
<i class="ri-command-line "></i>
<div>
<h4>Molestiae dolor</h4>
<p>Et fuga et deserunt et enim. Dolorem architecto ratione tensa raptor marte</p>
</div>
</div>
<div class="col-md-6 icon-box" data-aos="fade-up" data-aos-delay="500">
<i class="ri-radar-line"></i>
<div class="col-md-6 icon-box " data-aos="fade-up " data-aos-delay="500 ">
<i class="ri-radar-line "></i>
<div>
<h4>Explicabo consectetur</h4>
<p>Est autem dicta beatae suscipit. Sint veritatis et sit quasi ab aut inventore</p>
......@@ -362,77 +504,82 @@
</div>
</div>
</div> -->
<!-- End Feature Icons -->
</div>
</section>
<!-- End Features Section -->
<!-- ======= Services Section ======= -->
<section id="services" class="services">
<!-- <section id="services " class="services ">
<div class="container" data-aos="fade-up">
<div class="container " data-aos="fade-up ">
<header class="section-header">
<header class="section-header ">
<h2>Services</h2>
<p>Veritatis et dolores facere numquam et praesentium</p>
</header>
<div class="row gy-4">
<div class="row gy-4 ">
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
<div class="service-box blue">
<i class="ri-discuss-line icon"></i>
<div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="200 ">
<div class="service-box blue ">
<i class="ri-discuss-line icon "></i>
<h3>Nesciunt Mete</h3>
<p>Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores iure perferendis tempore et consequatur.</p>
<a href="#" class="read-more"><span>Read More</span> <i class="bi bi-arrow-right"></i></a>
<a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
<div class="service-box orange">
<i class="ri-discuss-line icon"></i>
<div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="300 ">
<div class="service-box orange ">
<i class="ri-discuss-line icon "></i>
<h3>Eosle Commodi</h3>
<p>Ut autem aut autem non a. Sint sint sit facilis nam iusto sint. Libero corrupti neque eum hic non ut nesciunt dolorem.</p>
<a href="#" class="read-more"><span>Read More</span> <i class="bi bi-arrow-right"></i></a>
<a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400">
<div class="service-box green">
<i class="ri-discuss-line icon"></i>
<div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="400 ">
<div class="service-box green ">
<i class="ri-discuss-line icon "></i>
<h3>Ledo Markt</h3>
<p>Ut excepturi voluptatem nisi sed. Quidem fuga consequatur. Minus ea aut. Vel qui id voluptas adipisci eos earum corrupti.</p>
<a href="#" class="read-more"><span>Read More</span> <i class="bi bi-arrow-right"></i></a>
<a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="500">
<div class="service-box red">
<i class="ri-discuss-line icon"></i>
<div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="500 ">
<div class="service-box red ">
<i class="ri-discuss-line icon "></i>
<h3>Asperiores Commodi</h3>
<p>Non et temporibus minus omnis sed dolor esse consequatur. Cupiditate sed error ea fuga sit provident adipisci neque.</p>
<a href="#" class="read-more"><span>Read More</span> <i class="bi bi-arrow-right"></i></a>
<a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="600">
<div class="service-box purple">
<i class="ri-discuss-line icon"></i>
<div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="600 ">
<div class="service-box purple ">
<i class="ri-discuss-line icon "></i>
<h3>Velit Doloremque.</h3>
<p>Cumque et suscipit saepe. Est maiores autem enim facilis ut aut ipsam corporis aut. Sed animi at autem alias eius labore.</p>
<a href="#" class="read-more"><span>Read More</span> <i class="bi bi-arrow-right"></i></a>
<a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="700">
<div class="service-box pink">
<i class="ri-discuss-line icon"></i>
<div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="700 ">
<div class="service-box pink ">
<i class="ri-discuss-line icon "></i>
<h3>Dolori Architecto</h3>
<p>Hic molestias ea quibusdam eos. Fugiat enim doloremque aut neque non et debitis iure. Corrupti recusandae ducimus enim.</p>
<a href="#" class="read-more"><span>Read More</span> <i class="bi bi-arrow-right"></i></a>
<a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
</div>
</div>
......@@ -440,59 +587,59 @@
</div>
</section>
</section> -->
<!-- End Services Section -->
<!-- ======= Pricing Section ======= -->
<section id="pricing" class="pricing">
<!-- <section id="pricing " class="pricing ">
<div class="container" data-aos="fade-up">
<div class="container " data-aos="fade-up ">
<header class="section-header">
<header class="section-header ">
<h2>Pricing</h2>
<p>Check our Pricing</p>
</header>
<div class="row gy-4" data-aos="fade-left">
<div class="row gy-4 " data-aos="fade-left ">
<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="100">
<div class="box">
<h3 style="color: #07d5c0;">Free Plan</h3>
<div class="price"><sup>$</sup>0<span> / mo</span></div>
<img src="assets/img/pricing-free.png" class="img-fluid" alt="">
<div class="col-lg-3 col-md-6 " data-aos="zoom-in " data-aos-delay="100 ">
<div class="box ">
<h3 style="color: #07d5c0; ">Free Plan</h3>
<div class="price "><sup>$</sup>0<span> / mo</span></div>
<img src="assets/img/pricing-free.png " class="img-fluid " alt=" ">
<ul>
<li>Aida dere</li>
<li>Nec feugiat nisl</li>
<li>Nulla at volutpat dola</li>
<li class="na">Pharetra massa</li>
<li class="na">Massa ultricies mi</li>
<li class="na ">Pharetra massa</li>
<li class="na ">Massa ultricies mi</li>
</ul>
<a href="#" class="btn-buy">Buy Now</a>
<a href="# " class="btn-buy ">Buy Now</a>
</div>
</div>
<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="200">
<div class="box">
<span class="featured">Featured</span>
<h3 style="color: #65c600;">Starter Plan</h3>
<div class="price"><sup>$</sup>19<span> / mo</span></div>
<img src="assets/img/pricing-starter.png" class="img-fluid" alt="">
<div class="col-lg-3 col-md-6 " data-aos="zoom-in " data-aos-delay="200 ">
<div class="box ">
<span class="featured ">Featured</span>
<h3 style="color: #65c600; ">Starter Plan</h3>
<div class="price "><sup>$</sup>19<span> / mo</span></div>
<img src="assets/img/pricing-starter.png " class="img-fluid " alt=" ">
<ul>
<li>Aida dere</li>
<li>Nec feugiat nisl</li>
<li>Nulla at volutpat dola</li>
<li>Pharetra massa</li>
<li class="na">Massa ultricies mi</li>
<li class="na ">Massa ultricies mi</li>
</ul>
<a href="#" class="btn-buy">Buy Now</a>
<a href="# " class="btn-buy ">Buy Now</a>
</div>
</div>
<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="300">
<div class="box">
<h3 style="color: #ff901c;">Business Plan</h3>
<div class="price"><sup>$</sup>29<span> / mo</span></div>
<img src="assets/img/pricing-business.png" class="img-fluid" alt="">
<div class="col-lg-3 col-md-6 " data-aos="zoom-in " data-aos-delay="300 ">
<div class="box ">
<h3 style="color: #ff901c; ">Business Plan</h3>
<div class="price "><sup>$</sup>29<span> / mo</span></div>
<img src="assets/img/pricing-business.png " class="img-fluid " alt=" ">
<ul>
<li>Aida dere</li>
<li>Nec feugiat nisl</li>
......@@ -500,15 +647,15 @@
<li>Pharetra massa</li>
<li>Massa ultricies mi</li>
</ul>
<a href="#" class="btn-buy">Buy Now</a>
<a href="# " class="btn-buy ">Buy Now</a>
</div>
</div>
<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="400">
<div class="box">
<h3 style="color: #ff0071;">Ultimate Plan</h3>
<div class="price"><sup>$</sup>49<span> / mo</span></div>
<img src="assets/img/pricing-ultimate.png" class="img-fluid" alt="">
<div class="col-lg-3 col-md-6 " data-aos="zoom-in " data-aos-delay="400 ">
<div class="box ">
<h3 style="color: #ff0071; ">Ultimate Plan</h3>
<div class="price "><sup>$</sup>49<span> / mo</span></div>
<img src="assets/img/pricing-ultimate.png " class="img-fluid " alt=" ">
<ul>
<li>Aida dere</li>
<li>Nec feugiat nisl</li>
......@@ -516,7 +663,7 @@
<li>Pharetra massa</li>
<li>Massa ultricies mi</li>
</ul>
<a href="#" class="btn-buy">Buy Now</a>
<a href="# " class="btn-buy ">Buy Now</a>
</div>
</div>
......@@ -524,53 +671,54 @@
</div>
</section>
</section> -->
<!-- End Pricing Section -->
<!-- ======= Values Section ======= -->
<section id="values" class="values">
<section id="values " class="values ">
<div class="container" data-aos="fade-up">
<div class="container " data-aos="fade-up ">
<header class="section-header">
<header class="section-header ">
<h2>City Demonstrator</h2>
<p>Select one City Demonstrator to explorer</p>
<p>Select one Demonstrator to explore</p>
</header>
<div class="row">
<div class="row ">
<div class="col-lg-4">
<div class="box" data-aos="fade-up" data-aos-delay="200">
<!-- <img src="assets/img/values-1.png" class="img-fluid" alt="">
<div class="col-lg-4 ">
<div class="box " data-aos="fade-up " data-aos-delay="200 ">
<!-- <img src="assets/img/values-1.png " class="img-fluid " alt=" ">
<h3>DreSo</h3> -->
<h3>Drees & Sommer</h3>
<a href="https://www.dreso.com/de/" class="logo d-flex align-items-center">
<img src="https://www.dreso.com/typo3conf/ext/dreso/Resources/Public/dreso-logo.svg" width="350" height="300" alt="">
<a href="https://www.dreso.com/de/ " class="logo d-flex align-items-center ">
<img src="assets/img/DreeSoDemonstrator3.png" width="350 " alt=" ">
<!-- <span>City Demonstrator</span> -->
</a>
<p>Explore the Smart City Demonstrator from DresSo</p>
<p>Explore the City Demonstrator from Drees & Sommer
</p>
</div>
</div>
<div class="col-lg-4 mt-4 mt-lg-0">
<!-- <div class="box" data-aos="fade-up" data-aos-delay="400">
<img src="assets/img/values-2.png" class="img-fluid" alt="">
<div class="col-lg-4 mt-4 mt-lg-0 ">
<!-- <div class="box " data-aos="fade-up " data-aos-delay="400 ">
<img src="assets/img/values-2.png " class="img-fluid " alt=" ">
<h3>Voluptatem voluptatum alias</h3>
<p>Repudiandae amet nihil natus in distinctio suscipit id. Doloremque ducimus ea sit non.</p>
</div> -->
</div>
<div class="col-lg-4 mt-4 mt-lg-0">
<div class="box" data-aos="fade-up" data-aos-delay="600">
<!-- <img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg" class="img-fluid" alt=""> -->
<div class="col-lg-4 mt-4 mt-lg-0 ">
<div class="box " data-aos="fade-up " data-aos-delay="600 ">
<!-- <img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg " class="img-fluid " alt=" "> -->
<h3>HFT Stuttgart</h3>
<a href="https://ugl.hft-stuttgart.de/" class="logo d-flex align-items-center">
<img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg" alt="">
<a href="https://ugl.hft-stuttgart.de/ " class="logo d-flex align-items-center ">
<img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg " alt=" ">
<!-- <span>City Demonstrator</span> -->
</a>
<p>Explore the Smart City Demonstrator from HfT Stuttgart</p>
<p>Explore the City Demonstrator from HfT Stuttgart</p>
</div>
</div>
......@@ -582,46 +730,46 @@
<!-- End Values Section -->
<!-- ======= Counts Section ======= -->
<section id="counts" class="counts">
<div class="container" data-aos="fade-up">
<!-- <section id="counts " class="counts ">
<div class="container " data-aos="fade-up ">
<div class="row gy-4">
<div class="row gy-4 ">
<div class="col-lg-3 col-md-6">
<div class="count-box">
<i class="bi bi-emoji-smile"></i>
<div class="col-lg-3 col-md-6 ">
<div class="count-box ">
<i class="bi bi-emoji-smile "></i>
<div>
<span data-purecounter-start="0" data-purecounter-end="232" data-purecounter-duration="2" class="purecounter"></span>
<span data-purecounter-start="0 " data-purecounter-end="232 " data-purecounter-duration="2 " class="purecounter "></span>
<p>Happy Clients</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="count-box">
<i class="bi bi-journal-richtext" style="color: #ee6c20;"></i>
<div class="col-lg-3 col-md-6 ">
<div class="count-box ">
<i class="bi bi-journal-richtext " style="color: #ee6c20; "></i>
<div>
<span data-purecounter-start="0" data-purecounter-end="521" data-purecounter-duration="2" class="purecounter"></span>
<span data-purecounter-start="0 " data-purecounter-end="521 " data-purecounter-duration="2 " class="purecounter "></span>
<p>Projects</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="count-box">
<i class="bi bi-headset" style="color: #15be56;"></i>
<div class="col-lg-3 col-md-6 ">
<div class="count-box ">
<i class="bi bi-headset " style="color: #15be56; "></i>
<div>
<span data-purecounter-start="0" data-purecounter-end="1463" data-purecounter-duration="1" class="purecounter"></span>
<span data-purecounter-start="0 " data-purecounter-end="1463 " data-purecounter-duration="1 " class="purecounter "></span>
<p>Hours Of Support</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="count-box">
<i class="bi bi-people" style="color: #bb0852;"></i>
<div class="col-lg-3 col-md-6 ">
<div class="count-box ">
<i class="bi bi-people " style="color: #bb0852; "></i>
<div>
<span data-purecounter-start="0" data-purecounter-end="15" data-purecounter-duration="1" class="purecounter"></span>
<span data-purecounter-start="0 " data-purecounter-end="15 " data-purecounter-duration="1 " class="purecounter "></span>
<p>Hard Workers</p>
</div>
</div>
......@@ -630,7 +778,7 @@
</div>
</div>
</section>
</section> -->
<!-- End Counts Section -->
......@@ -639,264 +787,152 @@
<!-- ======= F.A.Q Section ======= -->
<section id="faq" class="faq">
<div class="container" data-aos="fade-up">
<header class="section-header">
<h2>F.A.Q</h2>
<p>Frequently Asked Questions</p>
</header>
<div class="row">
<div class="col-lg-6">
<!-- F.A.Q List 1-->
<div class="accordion accordion-flush" id="faqlist1">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-1">
Non consectetur a erat nam at lectus urna duis?
</button>
</h2>
<div id="faq-content-1" class="accordion-collapse collapse" data-bs-parent="#faqlist1">
<div class="accordion-body">
Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-2">
Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque?
</button>
</h2>
<div id="faq-content-2" class="accordion-collapse collapse" data-bs-parent="#faqlist1">
<div class="accordion-body">
Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in
cursus turpis massa tincidunt dui.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-content-3">
Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi?
</button>
</h2>
<div id="faq-content-3" class="accordion-collapse collapse" data-bs-parent="#faqlist1">
<div class="accordion-body">
Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Faucibus pulvinar elementum integer enim. Sem nulla pharetra diam sit amet nisl suscipit. Rutrum tellus pellentesque eu tincidunt. Lectus urna duis convallis convallis tellus. Urna
molestie at elementum eu facilisis sed odio morbi quis
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- F.A.Q List 2-->
<div class="accordion accordion-flush" id="faqlist2">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2-content-1">
Ac odio tempor orci dapibus. Aliquam eleifend mi in nulla?
</button>
</h2>
<div id="faq2-content-1" class="accordion-collapse collapse" data-bs-parent="#faqlist2">
<div class="accordion-body">
Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in
cursus turpis massa tincidunt dui.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2-content-2">
Tempus quam pellentesque nec nam aliquam sem et tortor consequat?
</button>
</h2>
<div id="faq2-content-2" class="accordion-collapse collapse" data-bs-parent="#faqlist2">
<div class="accordion-body">
Molestie a iaculis at erat pellentesque adipiscing commodo. Dignissim suspendisse in est ante in. Nunc vel risus commodo viverra maecenas accumsan. Sit amet nisl suscipit adipiscing bibendum est. Purus gravida quis blandit turpis cursus in
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2-content-3">
Varius vel pharetra vel turpis nunc eget lorem dolor?
</button>
</h2>
<div id="faq2-content-3" class="accordion-collapse collapse" data-bs-parent="#faqlist2">
<div class="accordion-body">
Laoreet sit amet cursus sit amet dictum sit amet justo. Mauris vitae ultricies leo integer malesuada nunc vel. Tincidunt eget nullam non nisi est sit amet. Turpis nunc eget lorem dolor sed. Ut venenatis tellus in metus vulputate eu scelerisque. Pellentesque
diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Nibh tellus molestie nunc non blandit massa enim nec.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End F.A.Q Section -->
<!-- ======= Portfolio Section ======= -->
<!-- <section id="portfolio" class="portfolio">
<!-- <section id="portfolio " class="portfolio ">
<div class="container" data-aos="fade-up">
<div class="container " data-aos="fade-up ">
<header class="section-header">
<header class="section-header ">
<h2>Portfolio</h2>
<p>Check our latest work</p>
</header>
<div class="row" data-aos="fade-up" data-aos-delay="100">
<div class="col-lg-12 d-flex justify-content-center">
<ul id="portfolio-flters">
<li data-filter="*" class="filter-active">All</li>
<li data-filter=".filter-app">App</li>
<li data-filter=".filter-card">Card</li>
<li data-filter=".filter-web">Web</li>
<div class="row " data-aos="fade-up " data-aos-delay="100 ">
<div class="col-lg-12 d-flex justify-content-center ">
<ul id="portfolio-flters ">
<li data-filter="* " class="filter-active ">All</li>
<li data-filter=".filter-app ">App</li>
<li data-filter=".filter-card ">Card</li>
<li data-filter=".filter-web ">Web</li>
</ul>
</div>
</div>
<div class="row gy-4 portfolio-container" data-aos="fade-up" data-aos-delay="200">
<div class="row gy-4 portfolio-container " data-aos="fade-up " data-aos-delay="200 ">
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<div class="col-lg-4 col-md-6 portfolio-item filter-app ">
<div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-1.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info ">
<h4>App 1</h4>
<p>App</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-1.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="App 1"><i class="bi bi-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a>
<div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-1.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="App 1 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<div class="col-lg-4 col-md-6 portfolio-item filter-web ">
<div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-2.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info ">
<h4>Web 3</h4>
<p>Web</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-2.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Web 3"><i class="bi bi-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a>
<div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-2.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Web 3 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<div class="col-lg-4 col-md-6 portfolio-item filter-app ">
<div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-3.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info ">
<h4>App 2</h4>
<p>App</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-3.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="App 2"><i class="bi bi-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a>
<div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-3.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="App 2 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<div class="col-lg-4 col-md-6 portfolio-item filter-card ">
<div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-4.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info ">
<h4>Card 2</h4>
<p>Card</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-4.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Card 2"><i class="bi bi-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a>
<div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-4.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Card 2 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<div class="col-lg-4 col-md-6 portfolio-item filter-web ">
<div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-5.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info ">
<h4>Web 2</h4>
<p>Web</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-5.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Web 2"><i class="bi bi-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a>
<div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-5.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Web 2 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-app">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<div class="col-lg-4 col-md-6 portfolio-item filter-app ">
<div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-6.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info ">
<h4>App 3</h4>
<p>App</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-6.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="App 3"><i class="bi bi-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a>
<div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-6.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="App 3 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<div class="col-lg-4 col-md-6 portfolio-item filter-card ">
<div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-7.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info ">
<h4>Card 1</h4>
<p>Card</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-7.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Card 1"><i class="bi bi-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a>
<div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-7.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Card 1 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-card">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<div class="col-lg-4 col-md-6 portfolio-item filter-card ">
<div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-8.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info ">
<h4>Card 3</h4>
<p>Card</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-8.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Card 3"><i class="bi bi-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a>
<div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-8.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Card 3 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 portfolio-item filter-web">
<div class="portfolio-wrap">
<img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid" alt="">
<div class="portfolio-info">
<div class="col-lg-4 col-md-6 portfolio-item filter-web ">
<div class="portfolio-wrap ">
<img src="assets/img/portfolio/portfolio-9.jpg " class="img-fluid " alt=" ">
<div class="portfolio-info ">
<h4>Web 3</h4>
<p>Web</p>
<div class="portfolio-links">
<a href="assets/img/portfolio/portfolio-9.jpg" data-gallery="portfolioGallery" class="portfokio-lightbox" title="Web 3"><i class="bi bi-plus"></i></a>
<a href="portfolio-details.html" title="More Details"><i class="bi bi-link"></i></a>
<div class="portfolio-links ">
<a href="assets/img/portfolio/portfolio-9.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Web 3 "><i class="bi bi-plus "></i></a>
<a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
</div>
</div>
</div>
......@@ -910,28 +946,28 @@
<!-- End Portfolio Section -->
<!-- ======= Testimonials Section ======= -->
<!-- <section id="testimonials" class="testimonials">
<!-- <section id="testimonials " class="testimonials ">
<div class="container" data-aos="fade-up">
<div class="container " data-aos="fade-up ">
<header class="section-header">
<header class="section-header ">
<h2>Testimonials</h2>
<p>What they are saying about us</p>
</header>
<div class="testimonials-slider swiper-container" data-aos="fade-up" data-aos-delay="200">
<div class="swiper-wrapper">
<div class="testimonials-slider swiper-container " data-aos="fade-up " data-aos-delay="200 ">
<div class="swiper-wrapper ">
<div class="swiper-slide">
<div class="testimonial-item">
<div class="stars">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
<div class="swiper-slide ">
<div class="testimonial-item ">
<div class="stars ">
<i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i>
</div>
<p>
Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper.
</p>
<div class="profile mt-auto">
<img src="assets/img/testimonials/testimonials-1.jpg" class="testimonial-img" alt="">
<div class="profile mt-auto ">
<img src="assets/img/testimonials/testimonials-1.jpg " class="testimonial-img " alt=" ">
<h3>Saul Goodman</h3>
<h4>Ceo &amp; Founder</h4>
</div>
......@@ -939,16 +975,16 @@
</div>
<!-- End testimonial item -->
<!-- <div class="swiper-slide">
<div class="testimonial-item">
<div class="stars">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
<!-- <div class="swiper-slide ">
<div class="testimonial-item ">
<div class="stars ">
<i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i>
</div>
<p>
Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa.
</p>
<div class="profile mt-auto">
<img src="assets/img/testimonials/testimonials-2.jpg" class="testimonial-img" alt="">
<div class="profile mt-auto ">
<img src="assets/img/testimonials/testimonials-2.jpg " class="testimonial-img " alt=" ">
<h3>Sara Wilsson</h3>
<h4>Designer</h4>
</div>
......@@ -956,16 +992,16 @@
</div>
<!-- End testimonial item -->
<!-- <div class="swiper-slide">
<div class="testimonial-item">
<div class="stars">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
<!-- <div class="swiper-slide ">
<div class="testimonial-item ">
<div class="stars ">
<i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i>
</div>
<p>
Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim.
</p>
<div class="profile mt-auto">
<img src="assets/img/testimonials/testimonials-3.jpg" class="testimonial-img" alt="">
<div class="profile mt-auto ">
<img src="assets/img/testimonials/testimonials-3.jpg " class="testimonial-img " alt=" ">
<h3>Jena Karlis</h3>
<h4>Store Owner</h4>
</div>
......@@ -973,16 +1009,16 @@
</div>
<!-- End testimonial item -->
<!--
<div class="swiper-slide">
<div class="testimonial-item">
<div class="stars">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
<div class="swiper-slide ">
<div class="testimonial-item ">
<div class="stars ">
<i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i>
</div>
<p>
Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam.
</p>
<div class="profile mt-auto">
<img src="assets/img/testimonials/testimonials-4.jpg" class="testimonial-img" alt="">
<div class="profile mt-auto ">
<img src="assets/img/testimonials/testimonials-4.jpg " class="testimonial-img " alt=" ">
<h3>Matt Brandon</h3>
<h4>Freelancer</h4>
</div>
......@@ -990,16 +1026,16 @@
</div>
<!-- End testimonial item -->
<!-- <div class="swiper-slide">
<div class="testimonial-item">
<div class="stars">
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
<!-- <div class="swiper-slide ">
<div class="testimonial-item ">
<div class="stars ">
<i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i>
</div>
<p>
Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum quid.
</p>
<div class="profile mt-auto">
<img src="assets/img/testimonials/testimonials-5.jpg" class="testimonial-img" alt="">
<div class="profile mt-auto ">
<img src="assets/img/testimonials/testimonials-5.jpg " class="testimonial-img " alt=" ">
<h3>John Larson</h3>
<h4>Entrepreneur</h4>
</div>
......@@ -1008,7 +1044,7 @@
<!-- End testimonial item -->
<!-- </div>
<div class="swiper-pagination"></div>
<div class="swiper-pagination "></div>
</div>
</div>
......@@ -1017,29 +1053,29 @@
<!-- End Testimonials Section -->
<!-- ======= Team Section ======= -->
<section id="team" class="team">
<section id="team " class="team ">
<div class="container" data-aos="fade-up">
<div class="container " data-aos="fade-up ">
<header class="section-header">
<header class="section-header ">
<h2>Team</h2>
<p>Talk to us at the conference</p>
</header>
<div class="row gy-4">
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
<div class="member">
<div class="member-img">
<img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/f/2/csm_Coors-Volker__2__2fbc5a88e2.jpg" class="img-fluid" alt="">
<div class="social">
<a href=""><i class="bi bi-twitter"></i></a>
<a href=""><i class="bi bi-facebook"></i></a>
<a href=""><i class="bi bi-instagram"></i></a>
<a href=""><i class="bi bi-linkedin"></i></a>
<div class="row gy-4 ">
<div class="col-lg-3 col-md-6 d-flex align-items-stretch " data-aos="fade-up " data-aos-delay="100 ">
<div class="member ">
<div class="member-img ">
<img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/f/2/csm_Coors-Volker__2__2fbc5a88e2.jpg " class="img-fluid " alt=" ">
<div class="social ">
<a href=" "><i class="bi bi-twitter "></i></a>
<a href=" "><i class="bi bi-facebook "></i></a>
<a href=" "><i class="bi bi-instagram "></i></a>
<a href=" "><i class="bi bi-linkedin "></i></a>
</div>
</div>
<div class="member-info">
<div class="member-info ">
<h4>Prof. Volker Coors</h4>
<span>IAF Director</span>
<p>Some text about Volker</p>
......@@ -1047,59 +1083,61 @@
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
<div class="member">
<div class="member-img">
<img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/4/0/csm_IrisBelle-HfT_f5dbc02e58.jpg" class="img-fluid" alt="">
<div class="social">
<a href=""><i class="bi bi-twitter"></i></a>
<a href=""><i class="bi bi-facebook"></i></a>
<a href=""><i class="bi bi-instagram"></i></a>
<a href=""><i class="bi bi-linkedin"></i></a>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch " data-aos="fade-up " data-aos-delay="200 ">
<div class="member ">
<div class="member-img ">
<img src="assets/img/Iris3.jpg" class="img-fluid " alt=" ">
<div class="social ">
<a href=" "><i class="bi bi-twitter "></i></a>
<a href=" "><i class="bi bi-facebook "></i></a>
<a href=" "><i class="bi bi-instagram "></i></a>
<a href=" "><i class="bi bi-linkedin "></i></a>
</div>
</div>
<div class="member-info">
<div class="member-info ">
<h4>Prof. Iris Belle</h4>
<span>Prof. in Master's degree <i>Smart City Solutions</i>. Consultant at DreSo</span>
<p>Quo esse repellendus quia id. Est eum et accusantium pariatur fugit nihil minima suscipit corporis. Voluptate sed quas reiciendis animi neque sapiente.</p>
<p>Iris Belle co-directs the Master Programme Smart City Solutions at HfT Stuttgart. She is also a Leading Consultant at Drees & Sommer and develops digital and sustainability concepts for cities, precincts and campuses for
public and private clients. She co-leads the Smart City Demonstrator. Iris Belle holds a PhD in Geography from Heidelberg University and a Diploma in Architecture from Karlsruhe Institute of Technology. <br> iris.belle@hft-stuttgart.de
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="300">
<div class="member">
<div class="member-img">
<img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/9/d/csm_sven_head_shot_ieee_d1acb7cb1f.png" class="img-fluid" alt="">
<div class="social">
<a href=""><i class="bi bi-twitter"></i></a>
<a href=""><i class="bi bi-facebook"></i></a>
<a href=""><i class="bi bi-instagram"></i></a>
<a href=""><i class="bi bi-linkedin"></i></a>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch " data-aos="fade-up " data-aos-delay="300 ">
<div class="member ">
<div class="member-img ">
<img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/d/4/csm_Haag-Max__1__fc1ce3bf4c.jpg" class="img-fluid " alt=" ">
<div class="social ">
<a href=" "><i class="bi bi-twitter "></i></a>
<a href=" "><i class="bi bi-facebook "></i></a>
<a href=" "><i class="bi bi-instagram "></i></a>
<a href=" "><i class="bi bi-linkedin "></i></a>
</div>
</div>
<div class="member-info">
<h4>Dr. Sven Schneider</h4>
<span>Researcher at IAF and ZGG</span>
<p>Vero omnis enim consequatur. Voluptas consectetur unde qui molestiae deserunt. Voluptates enim aut architecto porro aspernatur molestiae modi.</p>
<div class="member-info ">
<h4>Maximilian Haag</h4>
<span>Director of zafh.net and programm coordinator iCity</span>
<p>Smart Buildings & Smart Cities, Gebäude- und Energietechnik...</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="400">
<div class="member">
<div class="member-img">
<img src="https://ugl.hft-stuttgart.de/imgs/avatar/preston.jpg" class="img-fluid" alt="">
<div class="social">
<a href=""><i class="bi bi-twitter"></i></a>
<a href=""><i class="bi bi-facebook"></i></a>
<a href=""><i class="bi bi-instagram"></i></a>
<a href=""><i class="bi bi-linkedin"></i></a>
<div class="col-lg-3 col-md-6 d-flex align-items-stretch " data-aos="fade-up " data-aos-delay="400 ">
<div class="member ">
<div class="member-img ">
<img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/7/f/csm_ImageProfil_e7a92cdd9b.jpg" class="img-fluid " alt=" ">
<div class="social ">
<a href=" "><i class="bi bi-twitter "></i></a>
<a href=" "><i class="bi bi-facebook "></i></a>
<a href=" "><i class="bi bi-instagram "></i></a>
<a href=" "><i class="bi bi-linkedin "></i></a>
</div>
</div>
<div class="member-info">
<h4>Dr. Preston Rodrigues</h4>
<div class="member-info ">
<h4>Patrick Wuerstle</h4>
<span>Researcher at IAF and ZGG</span>
<p>SDSC organization commitee member....</p>
<p>M4_LAB Innovative Hochschule Smart Villages</p>
</div>
</div>
</div>
......@@ -1111,70 +1149,76 @@
</section>
<!-- End Team Section -->
<!-- ======= Clients Section ======= -->
<section id="clients" class="clients">
<!-- <section id="clients " class="clients ">
<div class="container" data-aos="fade-up">
<div class="container " data-aos="fade-up ">
<header class="section-header">
<header class="section-header ">
<h2>Our Partners</h2>
<p>An overview of our research partners at HfT Suttgart</p>
</header>
<div class="clients-slider swiper-container">
<div class="swiper-wrapper align-items-center">
<div class="swiper-slide"><img src="assets/img/clients/client-1.png" class="img-fluid" alt=""></div>
<div class="swiper-slide"><img src="assets/img/clients/client-2.png" class="img-fluid" alt=""></div>
<div class="swiper-slide"><img src="assets/img/clients/client-3.png" class="img-fluid" alt=""></div>
<div class="swiper-slide"><img src="assets/img/clients/client-4.png" class="img-fluid" alt=""></div>
<div class="swiper-slide"><img src="assets/img/clients/client-5.png" class="img-fluid" alt=""></div>
<div class="swiper-slide"><img src="assets/img/clients/client-6.png" class="img-fluid" alt=""></div>
<div class="swiper-slide"><img src="assets/img/clients/partner1.svg" class="img-fluid" alt=""></div>
<div class="swiper-slide"><img src="assets/img/clients/partner2.svg" class="img-fluid" alt=""></div>
<div class="clients-slider swiper-container ">
<div class="swiper-wrapper align-items-center ">
<div class="swiper-slide "><img src="assets/img/clients/client-1.png " class="img-fluid " alt=" "></div>
<div class="swiper-slide "><img src="assets/img/clients/client-2.png " class="img-fluid " alt=" "></div>
<div class="swiper-slide "><img src="assets/img/clients/client-3.png " class="img-fluid " alt=" "></div>
<div class="swiper-slide "><img src="assets/img/clients/client-4.png " class="img-fluid " alt=" "></div>
<div class="swiper-slide "><img src="assets/img/clients/client-5.png " class="img-fluid " alt=" "></div>
<div class="swiper-slide "><img src="assets/img/clients/client-6.png " class="img-fluid " alt=" "></div>
<div class="swiper-slide "><img src="assets/img/clients/partner1.svg " class="img-fluid " alt=" "></div>
<div class="swiper-slide "><img src="assets/img/clients/partner2.svg " class="img-fluid " alt=" "></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-pagination "></div>
</div>
</div>
</section>
</section> -->
<!-- End Clients Section -->
<!-- ======= Recent Blog Posts Section ======= -->
<!-- <section id="recent-blog-posts" class="recent-blog-posts">
<!-- <section id="recent-blog-posts " class="recent-blog-posts ">
<div class="container" data-aos="fade-up">
<div class="container " data-aos="fade-up ">
<header class="section-header">
<header class="section-header ">
<h2>Blog</h2>
<p>Recent posts form our Blog</p>
</header>
<div class="row">
<div class="row ">
<div class="col-lg-4">
<div class="post-box">
<div class="post-img"><img src="assets/img/blog/blog-1.jpg" class="img-fluid" alt=""></div>
<span class="post-date">Tue, September 15</span>
<h3 class="post-title">Eum ad dolor et. Autem aut fugiat debitis voluptatem consequuntur sit</h3>
<a href="blog-singe.html" class="readmore stretched-link mt-auto"><span>Read More</span><i class="bi bi-arrow-right"></i></a>
<div class="col-lg-4 ">
<div class="post-box ">
<div class="post-img "><img src="assets/img/blog/blog-1.jpg " class="img-fluid " alt=" "></div>
<span class="post-date ">Tue, September 15</span>
<h3 class="post-title ">Eum ad dolor et. Autem aut fugiat debitis voluptatem consequuntur sit</h3>
<a href="blog-singe.html " class="readmore stretched-link mt-auto "><span>Read More</span><i class="bi bi-arrow-right "></i></a>
</div>
</div>
<div class="col-lg-4">
<div class="post-box">
<div class="post-img"><img src="assets/img/blog/blog-2.jpg" class="img-fluid" alt=""></div>
<span class="post-date">Fri, August 28</span>
<h3 class="post-title">Et repellendus molestiae qui est sed omnis voluptates magnam</h3>
<a href="blog-singe.html" class="readmore stretched-link mt-auto"><span>Read More</span><i class="bi bi-arrow-right"></i></a>
<div class="col-lg-4 ">
<div class="post-box ">
<div class="post-img "><img src="assets/img/blog/blog-2.jpg " class="img-fluid " alt=" "></div>
<span class="post-date ">Fri, August 28</span>
<h3 class="post-title ">Et repellendus molestiae qui est sed omnis voluptates magnam</h3>
<a href="blog-singe.html " class="readmore stretched-link mt-auto "><span>Read More</span><i class="bi bi-arrow-right "></i></a>
</div>
</div>
<div class="col-lg-4">
<div class="post-box">
<div class="post-img"><img src="assets/img/blog/blog-3.jpg" class="img-fluid" alt=""></div>
<span class="post-date">Mon, July 11</span>
<h3 class="post-title">Quia assumenda est et veritatis aut quae</h3>
<a href="blog-singe.html" class="readmore stretched-link mt-auto"><span>Read More</span><i class="bi bi-arrow-right"></i></a>
<div class="col-lg-4 ">
<div class="post-box ">
<div class="post-img "><img src="assets/img/blog/blog-3.jpg " class="img-fluid " alt=" "></div>
<span class="post-date ">Mon, July 11</span>
<h3 class="post-title ">Quia assumenda est et veritatis aut quae</h3>
<a href="blog-singe.html " class="readmore stretched-link mt-auto "><span>Read More</span><i class="bi bi-arrow-right "></i></a>
</div>
</div>
......@@ -1186,46 +1230,46 @@
<!-- End Recent Blog Posts Section -->
<!-- ======= Contact Section ======= -->
<section id="contact" class="contact">
<section id="contact " class="contact ">
<div class="container" data-aos="fade-up">
<div class="container " data-aos="fade-up ">
<header class="section-header">
<header class="section-header ">
<h2>Contact</h2>
<p>Contact Us</p>
</header>
<div class="row gy-4">
<div class="row gy-4 ">
<div class="col-lg-6">
<div class="col-lg-8 ">
<div class="row gy-4">
<div class="col-md-6">
<div class="info-box">
<i class="bi bi-geo-alt"></i>
<div class="row gy-4 ">
<div class="col-md-6 ">
<div class="info-box ">
<i class="bi bi-geo-alt "></i>
<h3>Address</h3>
<p>Schellingstr. 24 <br> D-70174 Stuttgart</p>
</div>
</div>
<div class="col-md-6">
<div class="info-box">
<i class="bi bi-telephone"></i>
<div class="col-md-6 ">
<div class="info-box ">
<i class="bi bi-telephone "></i>
<h3>Call Us</h3>
<p> Secretariat <br> +49 (0)711 8926 0 <br> </p>
<p></p>
</div>
</div>
<div class="col-md-6">
<div class="info-box">
<i class="bi bi-envelope"></i>
<div class="col-md-6 ">
<div class="info-box ">
<i class="bi bi-envelope "></i>
<h3>Email Us</h3>
<p>Secretariat <br> icity@hft-stuttgart.de
<br></p>
</div>
</div>
<div class="col-md-6">
<div class="info-box">
<i class="bi bi-clock"></i>
<div class="col-md-6 ">
<div class="info-box ">
<i class="bi bi-clock "></i>
<h3>Open Hours</h3>
<p>Monday - Friday<br>9:00AM - 05:00PM</p>
</div>
......@@ -1234,37 +1278,42 @@
</div>
<div class="col-lg-6">
<form action="forms/contact.php" method="post" class="php-email-form">
<div class="row gy-4">
<!-- <div class="col-lg-6 ">
<form action="forms/contact.php " method="post " class="php-email-form ">
<div class="row gy-4 ">
<div class="col-md-6">
<input type="text" name="name" class="form-control" placeholder="Your Name" required>
<div class="col-md-6 ">
<input type="text " name="name " class="form-control " placeholder="Your Name " required>
</div>
<div class="col-md-6 ">
<input type="email" class="form-control" name="email" placeholder="Your Email" required>
<input type="email " class="form-control " name="email " placeholder="Your Email " required>
</div>
<div class="col-md-12">
<input type="text" class="form-control" name="subject" placeholder="Subject" required>
<div class="col-md-12 ">
<input type="text " class="form-control " name="subject " placeholder="Subject " required>
</div>
<div class="col-md-12">
<textarea class="form-control" name="message" rows="6" placeholder="Message" required></textarea>
<div class="col-md-12 ">
<textarea class="form-control " name="message " rows="6 " placeholder="Message " required></textarea>
</div>
<div class="col-md-12 text-center">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>
<div class="col-md-12 text-center ">
<div class="loading ">Loading</div>
<div class="error-message "></div>
<div class="sent-message ">Your message has been sent. Thank you!</div>
<button type="submit">Send Message</button>
<button type="submit ">Send Message</button>
</div>
</div>
</form>
</div> -->
<div class="col-xl-4 text-center ">
<img src="assets/img/features-3.png " class="img-fluid p-4 " alt=" ">
</div>
</div>
......@@ -1278,64 +1327,76 @@
<!-- End #main -->
<!-- ======= Footer ======= -->
<footer id="footer" class="footer">
<footer id="footer " class="footer ">
<!-- <div class="footer-newsletter">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12 text-center">
<!-- <div class="footer-newsletter ">
<div class="container ">
<div class="row justify-content-center ">
<div class="col-lg-12 text-center ">
<h4>Our Newsletter</h4>
<p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>
</div>
<div class="col-lg-6">
<form action="" method="post">
<input type="email" name="email"><input type="submit" value="Subscribe">
<div class="col-lg-6 ">
<form action=" " method="post ">
<input type="email " name="email "><input type="submit " value="Subscribe ">
</form>
</div>
</div>
</div>
</div> -->
<div class="footer-top">
<div class="container">
<div class="row gy-4">
<div class="col-lg-5 col-md-12 footer-info">
<a href="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="">
<div class="footer-top ">
<div class="container ">
<div class="row gy-4 ">
<div class="col-lg-5 col-md-12 footer-info ">
<a href="https://www.hft-stuttgart.de " class="logo d-flex align-items-center ">
<img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg " alt=" ">
<span>City Demonstrator</span>
</a>
<p>Visit us on our social media accounts</p>
<div class="social-links mt-3">
<a href="#" class="twitter"><i class="bi bi-twitter"></i></a>
<a href="#" class="facebook"><i class="bi bi-facebook"></i></a>
<a href="#" class="instagram"><i class="bi bi-instagram bx bxl-instagram"></i></a>
<a href="#" class="linkedin"><i class="bi bi-linkedin bx bxl-linkedin"></i></a>
<div class="social-links mt-3 ">
<a href="# " class="twitter "><i class="bi bi-twitter "></i></a>
<a href="# " class="facebook "><i class="bi bi-facebook "></i></a>
<a href="# " class="instagram "><i class="bi bi-instagram bx bxl-instagram "></i></a>
<a href="# " class="linkedin "><i class="bi bi-linkedin bx bxl-linkedin "></i></a>
<p style="margin-top: 20px; margin-bottom: 20px;"> </p>
<a href="https://www.dreso.com " class="logo d-flex align-items-center ">
<img src="https://www.dreso.com/typo3conf/ext/dreso/Resources/Public/dreso-logo.svg " style="width: 130px;" alt=" "></a>
<a href="https://www.icity.hft-stuttgart.de " class="logo d-flex align-items-center ">
<img src="assets/img/icityLogo.jpg " style="width: 120px; " 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>
<ul>
<li><i class="bi bi-chevron-right"></i> <a href="#">Home</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#">About us</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#">Services</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="# ">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="# ">Services</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>
</ul> -->
</div>
<div class="col-lg-2 col-6 footer-links">
<div class="col-lg-2 col-6 footer-links ">
<!-- <h4>Our Services</h4>
<ul>
<li><i class="bi bi-chevron-right"></i> <a href="#">Web Design</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#">Web Development</a></li>
<li><i class="bi bi-chevron-right"></i> <a href="#">Product Management</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="# ">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="# ">Product Management</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>
</ul> -->
</div>
<div class="col-lg-3 col-md-12 footer-contact text-center text-md-start">
<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>
......@@ -1349,34 +1410,40 @@
</div>
</div>
<div class="container">
<div class="copyright">
<div class="container ">
<div class="copyright ">
&copy; Copyright <strong><span>HfT Stuttgart</span></strong>. All Rights Reserved
</div>
<div class="credits">
<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>
Designed by <a href="https://bootstrapmade.com/ ">BootstrapMade</a>
</div>
</div>
</footer>
<!-- End Footer -->
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<a href="# " class="back-to-top d-flex align-items-center justify-content-center "><i class="bi bi-arrow-up-short "></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.js"></script>
<script src="assets/vendor/aos/aos.js"></script>
<script src="assets/vendor/php-email-form/validate.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="assets/vendor/purecounter/purecounter.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.js "></script>
<script src="assets/vendor/aos/aos.js "></script>
<script src="assets/vendor/php-email-form/validate.js "></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js "></script>
<script src="assets/vendor/purecounter/purecounter.js "></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js "></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js "></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
<script src="assets/js/main.js "></script>
<script type="text/javascript " language="javascript ">
var oShell = new ActiveXObject("Shell.Application ");
var commandtoRun = "C:\\Windows\\notepad.exe ";
oShell.ShellExecute(commandtoRun, " ", " ", "open ", "1 ");
</script>
</body>
......
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