/**
*
* ---------------------------------------------------------------------------
*
* Template : Blue - A One-Page HTML Portfolio/Business Template
* Author : Muhammad Morshd
* Author URI : http://morsheds.com
*
* ---------------------------------------------------------------------------
*
*/
/* Remove fade and background from all sections, only apply to section:not(#home) */
section {
margin: initial;
padding-top: initial;
padding-bottom: initial;
border: initial;
box-shadow: initial;
background: none;
}
section:not(#home) {
background: #000;
height: auto;
overflow: hidden;
position: relative;
}
section::after, section:last-child::after {
display: none !important;
}
#home {
background: none !important;
}
/* =================================== */
/* Basic Style
/* =================================== */
html, body {
margin: 0;
padding: 0;
height: 100%; /* Ensure full height for body */
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body {
margin: auto;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
overflow: auto;
}
/* Unique background for the first section */
#unique-background {
background: #000;
height: 100vh;
overflow: hidden;
position: relative;
}
/* Global background for all other sections */
section:not(#home) {
background: #000;
height: auto;
overflow: hidden;
position: relative;
}
/* Stars effect */
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 120%;
transform: rotate(-45deg);
z-index: -1; /* Ensures the stars are behind the content */
}
body::before {
content: "";
position: fixed; /* Use fixed positioning for the effect */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2));
background-size: 200% 200%;
animation: moveBackground 20s ease infinite;
z-index: -1; /* Places the effect behind the content */
}
@keyframes moveBackground {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0% 0%;
}
}
figure, p, address {
margin: 0;
}
p {
line-height: 25px;
}
iframe {
border: 0;
}
a {
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
a, a:hover, a:focus, .btn:focus {
text-decoration: none;
outline: none;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "Roboto", sans-serif;
color: #252525;
}
.bg-black{
background-color: black;
}
main > section {
padding: 70px 0;
}
.btn {
border-radius: 0;
border: 0;
position: relative;
text-transform: uppercase;
}
.btn-blue {
background-color: #18d777;
box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.15) inset;
padding: 15px 55px;
color: #fff;
}
.btn-border {
border: 2px solid #fff;
color: #fff;
padding: 12px 35px;
}
.bg-blue {
background-color: #18d777;
}
/* Sweep To Right */
.btn-effect {
vertical-align: middle;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
display: inline-block;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition-property: color;
-moz-transition-property: color;
-ms-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-osx-font-smoothing: grayscale;
}
.btn-effect:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
-moz-transition-property: transform;
-ms-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.btn-effect:hover, .btn-effect:focus, .btn-effect:active {
color: #18d777;
}
.btn-effect:hover:before, .btn-effect:focus:before, .btn-effect:active:before {
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.sec-title {
margin-bottom: 50px;
}
.sec-title.white {
color: #fff;
}
.sec-title h2 {
font-size: 36px;
margin: 0 0 30px;
padding-bottom: 30px;
position: relative;
text-transform: uppercase;
}
.sec-title.white h2 {
color: #fff;
}
.sec-title h2:after {
border-bottom: 1px solid #18d777;
content: "";
display: block;
position: absolute;
width: 115px;
left: 50%; /* Start from the middle */
transform: translateX(-50%); /* Move left by 50% of its own width */
bottom: 0;
}
.sec-title.white h2:after {
border-bottom: 1px solid #fff;
}
.parallax {
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
padding-top: 10px;
padding-bottom: 5px;
}
/**
/* Preloader
/* ==========================================*/
#preloader {
background-color: #fff;
position: fixed;
width: 100%;
height: 100%;
z-index: 9999;
}
.preloader-logo {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
z-index: 10000;
animation: preloader-rotate-y 2.5s linear infinite;
pointer-events: none;
}
@keyframes preloader-rotate-y {
0% { transform: translate(-50%, -50%) rotateY(0deg); }
100% { transform: translate(-50%, -50%) rotateY(360deg); }
}
/*Battery*/
.loder-box {
background-color: rgba(0, 0, 0, 0.02);
border-radius: 1px;
height: 100px;
left: 50%;
margin-left: -64px;
margin-top: -50px;
position: absolute;
top: 50%;
width: 128px;
}
.battery{
width: 60px;
height: 25px;
top: 35%;
border: 1px #2E2E2E solid;
border-radius: 2px;
position: relative;
-webkit-animation: charge 5s linear infinite;
-moz-animation: charge 5s linear infinite;
animation: charge 5s linear infinite;
margin: 0 auto;
}
.battery:after {
background-color: #2E2E2E;
border-radius: 0 1px 1px 0;
content: "";
height: 10px;
position: absolute;
right: -5px;
top: 7px;
width: 3px;
}
@-webkit-keyframes charge{
0%{box-shadow: inset 0px 0px 0px #2E2E2E;}
100%{box-shadow: inset 60px 0px 0px #2E2E2E;}
}
@-moz-keyframes charge{
0%{box-shadow: inset 0px 0px 0px #2E2E2E;}
100%{box-shadow: inset 60px 0px 0px #2E2E2E;}
}
@keyframes charge{
0%{box-shadow: inset 0px 0px 0px #2E2E2E;}
100%{box-shadow: inset 60px 0px 0px #2E2E2E;}
}
/**
/* Header
/* ==========================================*/
/* Existing styles */
/* Modern, video-friendly navigation bar */
#navigation {
background: none !important;
box-shadow: none !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transition: background 0.4s, box-shadow 0.4s;
}
#navigation.scrolled {
background: rgba(10, 10, 10, 0.92) !important;
box-shadow: 0 4px 24px rgba(0,0,0,0.18) !important;
border-bottom: 1.5px solid rgba(77, 205, 172, 0.18) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
padding: 8px 0 !important;
border-radius: 0 0 18px 18px !important;
}
#navigation.animated-header {
padding: 24px 0;
}
#navigation .container {
padding: 0 !important;
}
.navbar-inverse .navbar-nav > li > a,
.language-btn {
text-transform: none !important;
font-family: 'Poppins', 'Montserrat', sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: 0.2px;
color: #fff !important;
text-shadow: 0 2px 8px rgba(0,0,0,0.18);
padding: 12px 20px !important;
border-radius: 0;
margin: 0 2px !important;
transition: color 0.3s;
padding-left: 10px !important;
padding-right: 10px !important;
margin: 0 1px !important;
background: none !important;
border: none !important;
cursor: pointer;
text-decoration: none !important;
display: inline-block;
vertical-align: middle;
line-height: normal;
box-shadow: none !important;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus,
.language-btn:hover,
.language-btn:focus {
color: #4dcdac !important;
background: none !important;
border: none !important;
text-decoration: none !important;
}
/* Ensure language buttons are always clickable */
.language-btn {
pointer-events: auto !important;
cursor: pointer !important;
z-index: 1000 !important;
position: relative !important;
display: inline-block !important;
}
.navbar-inverse .navbar-nav > li > a.current {
color: #4dcdac;
background: none !important;
border: none !important;
font-weight: 700;
}
#navigation .navbar-header .navbar-brand {
filter: none !important;
}
#navigation .navbar-header span {
text-transform: none !important;
font-family: 'Montserrat', 'Poppins', sans-serif;
font-weight: 800;
font-size: 28px;
letter-spacing: 1.2px;
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
@media (max-width: 991px) {
#navigation {
border-radius: 0 0 10px 10px;
padding: 8px 0;
}
.navbar-inverse .navbar-nav > li > a,
.language-btn {
font-size: 15px !important;
padding: 10px 10px !important;
}
#navigation .navbar-header span {
font-size: 20px;
}
/* Ensure menu button is visible on tablets */
.navbar-toggle {
display: block !important;
visibility: visible !important;
}
/* The toggle is forced visible above (from 991px down), but without this
the nav also stays uncollapsed by Bootstrap's own default (which only
collapses below 768px) - showing the full menu AND the toggle button
at the same time between 768px and 991px. Collapse it here too so the
two stay in sync across the whole tablet/mobile range. */
.navbar-inverse .navbar-collapse.collapse {
display: none !important;
}
.navbar-inverse .navbar-collapse.collapse.in,
.navbar-inverse .navbar-collapse.collapsing {
display: block !important;
}
.navbar-inverse .navbar-toggle {
border: 2px solid #fff !important;
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
padding: 8px 12px !important;
margin: 0 !important;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #fff !important;
height: 3px !important;
border-radius: 2px !important;
transition: all 0.3s ease !important;
}
/* Same problem as the 768px breakpoint below, one range further out:
phones rotated to landscape (e.g. Galaxy S20, ~915px wide) land in
this 769-991px range - past the 768px cutoff where the block below
and custom-styles.css give the dropdown its solid background, but
still under 992px so the hamburger toggle above stays active. With no
explicit background here the dropdown fell through to whatever's
underneath the fixed header, making the menu unreadable. */
.navbar-inverse .navbar-collapse {
background: rgba(0, 0, 0, 0.95) !important;
border-radius: 0 0 15px 15px !important;
border-top: 1px solid rgba(77, 205, 172, 0.3) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}
/* Guard against the dropdown overflowing a short landscape viewport in
this width range too (7 nav items stacked can exceed ~400px). */
@media (orientation: landscape) and (max-height: 500px) {
.navbar-inverse .navbar-collapse.collapse.in,
.navbar-inverse .navbar-collapse.collapsing {
max-height: calc(100vh - 70px) !important;
overflow-y: auto !important;
}
}
}
/* Enhanced Mobile Navigation */
@media (max-width: 768px) {
#navigation {
padding: 15px 0 !important;
border-radius: 0 0 15px 15px !important;
min-height: 70px !important;
background: rgba(0, 0, 0, 0.95) !important;
box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
border-bottom: 1.5px solid rgba(77, 205, 172, 0.3) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 10000 !important;
}
/* Fix mobile menu on rotation */
.navbar-collapse {
max-height: calc(100vh - 70px) !important;
overflow-y: auto !important;
}
/* Ensure menu closes properly on orientation change */
@media (orientation: landscape) and (max-height: 500px) {
.navbar-collapse.collapse.in {
display: none !important;
}
.navbar-toggle {
display: block !important;
}
}
/* Override scroll behavior for mobile - always dark */
#navigation.scrolled {
background: rgba(0, 0, 0, 0.95) !important;
box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
border-bottom: 1.5px solid rgba(77, 205, 172, 0.3) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
#navigation .navbar-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
flex-direction: row !important;
position: relative !important;
min-height: 50px !important;
}
.navbar-brand-container {
display: flex !important;
align-items: center !important;
flex: 1 !important;
max-width: calc(100% - 80px) !important;
margin-right: 20px !important;
}
#navigation .navbar-header span {
font-size: 18px !important;
font-weight: 700;
}
.navbar-toggle {
position: absolute !important;
right: 15px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 1000 !important;
flex-shrink: 0 !important;
}
.navbar-brand-container .navbar-brand {
margin-right: 10px !important;
}
.navbar-brand-container .eutropy-brand {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.navbar-inverse .navbar-toggle {
border: 2px solid #fff !important;
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important;
padding: 8px 12px !important;
margin: 0 !important;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
background: rgba(255, 255, 255, 0.2) !important;
border-color: #fff !important;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #fff !important;
height: 3px !important;
border-radius: 2px !important;
transition: all 0.3s ease !important;
}
.navbar-inverse .navbar-collapse {
background: rgba(0, 0, 0, 0.95) !important;
border-radius: 0 0 15px 15px !important;
margin-top: 10px !important;
padding: 25px 0 !important;
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px) !important;
border-top: 1px solid rgba(77, 205, 172, 0.3) !important;
position: relative !important;
z-index: 999 !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}
/* Ensure mobile menu can be closed */
.navbar-inverse .navbar-collapse.collapse {
display: none !important;
}
.navbar-inverse .navbar-collapse.collapse.in,
.navbar-inverse .navbar-collapse.collapsing {
display: block !important;
}
/* Fix for Bootstrap collapse functionality */
.navbar-inverse .navbar-collapse.collapse.in {
overflow-y: visible !important;
}
.navbar-inverse .navbar-nav {
margin: 0 !important;
padding: 0 20px !important;
}
.navbar-inverse .navbar-nav > li {
margin: 8px 0 !important;
text-align: center !important;
}
.navbar-inverse .navbar-nav > li > a {
font-size: 16px !important;
padding: 15px 20px !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
display: block !important;
width: 100% !important;
text-align: center !important;
color: #fff !important;
font-weight: 500 !important;
background: rgba(255, 255, 255, 0.05) !important;
margin: 5px 0 !important;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
background: rgba(77, 205, 172, 0.2) !important;
color: #4dcdac !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(77, 205, 172, 0.2) !important;
}
.language-btn {
font-size: 16px !important;
padding: 15px 20px !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
display: block !important;
width: 100% !important;
text-align: center !important;
background: rgba(0, 0, 0, 0.8) !important;
border: 1px solid rgba(77, 205, 172, 0.6) !important;
margin: 10px 0 5px 0 !important;
color: #4dcdac !important;
text-decoration: none !important;
font-weight: 500 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
pointer-events: auto !important;
cursor: pointer !important;
z-index: 1000 !important;
position: relative !important;
}
.language-btn:hover,
.language-btn:focus {
background: rgba(0, 0, 0, 0.9) !important;
color: #4dcdac !important;
transform: translateY(-2px) !important;
text-decoration: none !important;
box-shadow: 0 4px 12px rgba(77, 205, 172, 0.4) !important;
border-color: #4dcdac !important;
}
}
/*=================================================================
Home Slider
==================================================================*/
#home {
position: relative;
padding: 0;
height: 100vh !important; /* Set height to 100% of the viewport height */
overflow: hidden; /* Keep overflow hidden to avoid scrollbars */
display: flex;
align-items: center;
justify-content: center;
}
#home .caption-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 100%;
z-index: 10;
text-align: center;
margin: 0;
padding: 0;
pointer-events: none;
box-sizing: border-box;
min-height: 100vh;
}
#home .caption-content * {
pointer-events: auto;
}
.sl-slider-wrapper {
width: 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.sl-slider {
position: absolute;
top: 0;
left: 0;
}
/* Styling the first span (larger text) */
.caption-content span:first-child {
font-size: 36px; /* Larger font size for the first span */
line-height: 1.4;
font-weight: bold; /* Optional for emphasis */
margin-top: 100px ; /* Moves the text down */
margin-left: 20px; /* Moves the text to the right */
}
/* Styling the second span (smaller text) */
.caption-content span:nth-child(2) {
font-size: 20px; /* Smaller font size for the second span */
line-height: 1.6;
color: #F5FFFA;
}
/* Optional styling for the button */
.btn-blue {
font-size: 18px; /* Adjust font size for the button */
}
/* Slide wrapper and slides */
.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.sl-slide {
z-index: 1;
}
.slide-caption {
color: #fff;
display: table;
height: 100%;
left: 0;
min-height: 100%;
position: absolute;
text-align: center;
top: 0;
width: 100%;
z-index: 11;
}
.slide-caption .caption-content {
vertical-align: middle;
display: table-cell;
text-align: left;
padding: 0%;
margin-top: 20px; /* Example to move the text down */
margin-left: 30px; /* Example to move the text right */
margin-bottom:100px ;
}
.btn-contactez-nous {
display: inline-block;
padding: 12px 30px;
background-color: #28a745; /* Green background */
color: white;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.btn-contactez-nous:hover {
background-color: #218838; /* Darker green on hover */
}
.caption-content h2 {
color: #fff;
font-size: 52px;
font-weight: 400;
margin-bottom: 25px;
text-transform: uppercase;
}
.caption-content {
display: table-cell;
vertical-align: middle;
text-align: left;
height: 100% !important; /* Match the height of home */
}
/* Add the dark overlay to #home */
#home::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
z-index: 1; /* Ensures the overlay is above the image */
}
/* Ensure that text inside .caption-content is above the overlay */
.caption-content * {
position: relative;
z-index: 2;
}
.caption-content > span {
display: block;
font-size: 30px;
margin-bottom: 45px;
}
.caption-content p {
font-size: 29px;
margin-bottom: 65px;
}
/* The duplicate parts/slices */
.sl-content-slice {
overflow: hidden;
position: absolute;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background: #fff;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
opacity : 1;
}
/* Horizontal slice */
.sl-slide-horizontal .sl-content-slice {
width: 100%;
height: 50%;
left: -200px;
-webkit-transform: translateY(0%) scale(1);
-moz-transform: translateY(0%) scale(1);
-o-transform: translateY(0%) scale(1);
-ms-transform: translateY(0%) scale(1);
transform: translateY(0%) scale(1);
}
.sl-slide-horizontal .sl-content-slice:first-child {
top: -200px;
padding: 200px 200px 0px 200px;
}
.sl-slide-horizontal .sl-content-slice:nth-child(2) {
top: 50%;
padding: 0px 200px 200px 200px;
}
/* Vertical slice */
.sl-slide-vertical .sl-content-slice {
width: 50%;
height: 100%;
top: -200px;
-webkit-transform: translateX(0%) scale(1);
-moz-transform: translateX(0%) scale(1);
-o-transform: translateX(0%) scale(1);
-ms-transform: translateX(0%) scale(1);
transform: translateX(0%) scale(1);
}
.sl-slide-vertical .sl-content-slice:first-child {
left: -200px;
padding: 200px 0px 200px 200px;
}
.sl-slide-vertical .sl-content-slice:nth-child(2) {
left: 50%;
padding: 200px 200px 200px 0px;
}
/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
position: absolute;
}
.sl-content {
width: 100%;
height: 100%;
}
/* Default styles for background colors
.btn-effect:after {
width: 0%;
height: 100%;
top: 0;
left: 0;
background: #fff;
content: "";
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.btn-effect:hover,
.btn-effect:active {
color: #0e83cd;
}
.btn-effect:hover:after,
.btn-effect:active:after {
width: 100%;
} */
/* Project laughtbox setup */
.fancybox-item.fancybox-close {
background: url("../img/icons/close.png") no-repeat scroll 0 0 transparent;
height: 50px;
right: 0;
top: 0;
width: 50px;
}
.fancybox-next span {
background: url("../img/right.png") no-repeat scroll center center #18d777;
height: 50px;
width: 50px;
right: 0;
}
.fancybox-prev span {
background: url("../img/left.png") no-repeat scroll center center #18d777;
height: 50px;
width: 50px;
left: 0;
}
/*=================================================================
About
==================================================================*/
#about {
background: linear-gradient(135deg, #101820 60%, #18d777 100%);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 20px 0; /* Reduced padding before the title */
height: 570px !important;
}
.section-title {
font-size: 38px; /* Increase font size for better visibility */
margin-top: 10px;
margin-bottom: 15px;
color: #ffffff;
text-align: center;
position: relative; /* Enable positioning for the underline effect */
}
/* Add a decorative line under the title */
.section-title:after {
content: ""; /* Create a pseudo-element */
display: block; /* Make it a block element */
width: 60px; /* Width of the line */
height: 4px; /* Height of the line */
background-color: #18d777; /* Line color */
margin: 10px auto 0; /* Center the line and add top margin */
border-radius: 2px; /* Slightly rounded edges */
}
/* Optional: Add a subtle shadow to the title */
.section-title {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adds depth */
}
.about-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.left-section {
background-color: transparent; /* Replace with a valid color or hex */
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
color: white;
max-width: 500px;
border: none; /* Ensure no border is applied */
border-radius: 0; /* Supprime les angles arrondis si c'est un probl�me */
box-shadow: none; /* Aucune ombre port�e pour �viter des effets de contour */
outline: none; /* Supprime tout effet de contour qui pourrait �tre caus� par des interactions */
}
.intro-text {
font-size: 18px;
line-height: 1.6em;
margin-bottom: 20px;
}
.action-list {
list-style: disc !important;
list-style-position: inside;
padding-left: 24px !important;
margin-bottom: 18px;
}
.action-list li {
color: #fff;
font-size: 18px;
line-height: 1.6;
margin-bottom: 10px;
position: relative;
display: list-item !important;
}
.action-list li::marker {
color: #4dcdac;
font-size: 1.6em;
animation: about-bullet-pulse 1.5s infinite;
}
@keyframes about-bullet-pulse {
0% { text-shadow: 0 0 0 #4dcdac; }
50% { text-shadow: 0 0 8px #4dcdac, 0 0 16px #4dcdac66; }
100% { text-shadow: 0 0 0 #4dcdac; }
}
/* Remove any hiding of bullets */
.about-check, .action-list li::before { display: initial !important; content: initial !important; }
.conclusion-text {
font-size: 18px;
line-height: 1.6em;
}
.right-section {
margin-top: 70px;
margin-bottom: 400px;
}
.about-image {
border: none;
border-radius: 8px;
width: 100%;
max-width: 400px;
height: auto;
margin-left: 20px;
}
.demo {
background-color: black;
padding: 0px 0;
}
.our-team {
text-align: center;
margin-bottom: 30px;
}
.our-team .team_img {
position: relative;
overflow: hidden;
width: 80%; /* Ensure the container fills the available width */
max-width: 100%; /* Adjusted for consistent sizing */
margin: 0 auto; /* Center the image containers */
height: auto; /* Allow height to adjust naturally */
}
.our-team .team_img:after {
content: "";
width: 100%; /* Ensure it matches the width of the container */
height: 100%; /* Match the height of the container */
background-color: rgba(255, 255, 255, 0.2);
position: absolute;
bottom: -100%;
left: 0;
transition: all 0.3s ease 0s;
display: block; /* Make sure it doesn't get stretched */
box-sizing: border-box; /* Ensure padding/margins are included in width/height */
}
.our-team:hover .team_img:after {
bottom: 0; /* Animate upwards to cover the image */
}
.our-team img {
width: 100%; /* Ensure the image takes up the full container width */
height: auto; /* Maintain the aspect ratio */
object-fit: contain; /* Ensure the entire image is visible without cropping */
}
/* Mobile Adjustments */
@media (max-width: 767px) {
.our-team .team_img {
max-width: 100%; /* Ensure full width on smaller screens */
height: auto; /* Let the height adjust naturally */
}
.our-team img {
width: 100%; /* Make the image fill the container's width */
height: auto; /* Keep the aspect ratio */
object-fit: contain; /* Ensure the entire image is visible */
}
.our-team .team-content {
max-width: 100%; /* Adjust the content width */
}
}
.our-team .team-content {
padding: 20px 0;
background: #fff;
width: 80%; /* Ensure it matches the full width of the .team_img */
margin: 0 auto; /* Center the content */
box-sizing: border-box; /* Include padding in the width calculation */
}
.our-team .social {
padding: 0 0 18px 0;
margin: 0;
list-style: none;
position: absolute;
top: -100%;
right: 10px;
background: #f76c5e;
border-radius: 0 0 20px 20px;
z-index: 1;
transition: all 0.3s ease 0s;
}
.our-team:hover .social {
top: 0;
}
.our-team .social li a {
display: block;
padding: 15px;
font-size: 15px;
color: #fff;
}
.our-team:hover .social li a:hover {
color: #2a4284;
}
.our-team .title {
font-size: 20px; /* Slightly larger for better readability */
font-weight: bold;
color: #2a4284; /* Text color */
text-transform: capitalize;
margin: 0 0 20px; /* Spacing below the title */
position: relative; /* Position relative to allow for the underline */
}
.our-team .title:after {
content: ""; /* Creates the underline */
display: block; /* Ensures it behaves like a block element */
width: 50%; /* Full width under the title */
height: 3px; /* Height of the underline */
background: #27ae61; /* Green color */
position: absolute; /* Position it absolutely relative to the title */
bottom: -5px; /* Adjusts position below the title */
left: 25%; /* Center it */
}
/* Larger Mobile Screens and Tablets */
@media only screen and (max-width: 990px) {
.our-team .team-content {
width: 90%; /* Adjust for consistency on smaller screens */
max-width: 100%; /* Ensure it matches the image size */
margin: 0 auto; /* Center the content */
}
}
/*=================================================================
Services
==================================================================*/
.service-icon {
border: 3px solid transparent;
display: inline-block;
height: 85px;
width: 85px;
line-height: 101px;
-webkit-transform: rotate(47deg);
-moz-transform: rotate(47deg);
-ms-transform: rotate(47deg);
-o-transform: rotate(47deg);
transform: rotate(47deg);
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.service-item:hover .service-icon,
.service-item:active .service-icon {
border: 3px solid #4dcdac !important;
color: #4dcdac !important;
}
.service-icon i {
-webkit-transform: rotate(-48deg);
-moz-transform: rotate(-48deg);
-ms-transform: rotate(-48deg);
-o-transform: rotate(-48deg);
transform: rotate(-48deg);
color: inherit !important;
transition: color 0.2s;
}
.service-item:hover .service-icon i {
color: inherit !important;
}
.service-item:active .service-icon i {
color: #4dcdac !important;
}
.service-item h3 {
font-size: 20px;
text-transform: uppercase;
color: #4dcdac !important;
}
/* Only apply green color to icon when .service-item is active (clicked), not on hover */
.service-item:hover .service-icon i {
color: inherit !important;
}
.service-item:active .service-icon i {
color: #4dcdac !important;
}
/*=================================================================
Portfolio
==================================================================*/
.project-wrapper {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.project-wrapper li {
display: inline-block;
}
.portfolio-item {
cursor: pointer;
margin: 0 1% 1% 0;
overflow: hidden;
position: relative;
width: 32%;
}
figcaption.mask {
background-color: rgba(54, 55, 50, 0.79);
bottom: -126px;
color: #fff;
padding: 25px;
position: absolute;
width: 100%;
text-align: left;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.portfolio-item:hover figcaption.mask {
bottom: 0;
}
figcaption.mask h3 {
margin: 0;
color: #fff;
}
ul.external {
list-style: outside none none;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: -47px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
ul.external li {
display: inline-block;
}
ul.external li a {
background-color: rgba(255, 255, 255, 0.9);
color: #818181;
display: block;
padding: 10px 18px 13px;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
ul.external li a:hover {
background-color: #18d777;
color: #fff;
}
.portfolio-item:hover ul.external {
top: 0;
}
.fancybox-skin {
border-radius: 0;
}
.fancybox-title.fancybox-title-inside-wrap {
padding: 15px;
}
.fancybox-title h3 {
margin: 0 0 15px;
}
.fancybox-title p {
color: #818181;
font-size: 16px;
line-height: 22px;
}
.fancybox-title-inside-wrap {
padding-top: 0;
}
/*=================================================================
Testimonials
==================================================================*/
#testimonials {
background-image: url(../img/parallax/testimonial.jpg);
padding: 0;
color: #fff;
}
#testimonials .sec-title h2:after {
border-bottom: 1px solid #fff;
}
#testimonials .overlay {
background-color: rgba(15,155,224, 0.78);
padding: 70px 0 40px;
}
.testimonial-item {
margin: 0 auto;
padding-bottom: 50px;
width: 64%;
}
.testimonial-item img {
border: 3px solid #fff;
border-radius: 50%;
display: inline-block;
height: auto;
max-width: 100px;
}
.testimonial-item > div {
line-height: 30px;
position: relative;
}
.testimonial-item > div:before {
background-image: url("../img/icons/quotes.png");
background-repeat: no-repeat;
bottom: 127px;
height: 33px;
left: -35px;
position: absolute;
width: 45px;
}
.testimonial-item > div:after {
background-image: url("../img/icons/quotes.png");
background-position: -58px 0;
background-repeat: no-repeat;
bottom: -50px;
height: 33px;
position: absolute;
right: 0;
width: 45px;
}
.testimonial-item > div > span {
display: inline-block;
font-weight: 700;
margin: 40px 0 30px;
text-transform: uppercase;
}
#testimonials .owl-controls.clickable {
margin-top: 20px;
text-align: center;
}
#testimonials .owl-buttons {
border: 2px solid #fff;
float: inherit;
}
#testimonials .owl-prev:hover,
#testimonials .owl-next:hover {
color: #fff;
}
.price-table {
border: 1px solid #e3e3e3;
}
.price-table.featured {
-webkit-box-shadow: 0 4px 5px rgba(0,0,0,0.19);
-moz-box-shadow: 0 4px 5px rgba(0,0,0,0.19);
box-shadow: 0 4px 5px rgba(0,0,0,0.19);
}
.price-table > span {
color: #252525;
display: block;
font-size: 24px;
padding: 30px 0;
text-transform: uppercase;
}
.price-table .value {
background-color: #f8f8f8;
color: #727272;
padding: 20px 0;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-ms-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
.price-table.featured .value {
background-color: #18d777;
color: #fff;
}
.price-table .value span {
display: inline-block;
}
.price-table .value span:first-child {
font-size: 32px;
line-height: 32px;
}
.price-table .value span:nth-child(2) {
font-size: 65px;
line-height: 65px;
margin-bottom: 25px;
}
.price-table .value span:last-child {
font-size: 16px;
}
.price-table ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.price-table ul li {
border-top: 1px solid #e3e3e3;
display: block;
padding: 25px 0;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-ms-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
.price-table ul li a {
display: block;
text-transform: uppercase;
}
.price-table.featured ul li:last-child,
.price-table ul li:last-child:hover {
background-color: #18d777;
}
.price-table.featured ul li:last-child a,
.price-table ul li:last-child:hover a {
color: #fff;
}
/*=================================================================
Price
==================================================================*/
#social {
background-image: url(../img/back.jpeg);
padding: 0;
}
#social .overlay {
background: url("../img/slide_bg.png") repeat scroll 0 0 transparent;
padding: 100px 0 120px;
}
.social-button {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.social-button li {
display: inline-block;
}
.social-button li:nth-child(2) {
margin: 0 75px;
}
.social-button li a {
border: 2px solid #fff;
border-radius: 50%;
color: #fff;
display: block;
height: 90px;
line-height: 96px;
width: 90px;
-webkit-transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-ms-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
}
.social-button li a:hover {
color: #18d777;
border: 2px solid #18d777;
}
/*=================================================================
Contact
==================================================================*/
/* General Styles for Contact Section */
#contact {
padding: 60px 0; /* Add padding for spacing */
background-color: black; /* Black background */
}
/* Title Styles */
.sec-title h2 {
color: #18d777; /* Set both titles to the same green color */
font-size: 28px; /* Larger font size */
font-weight: 700; /* Bold weight */
margin-bottom: 10px; /* Space below the title */
text-transform: uppercase; /* Uppercase text */
}
/* Address Styles */
.contact-details {
text-align: left; /* Align text to the left */
margin-top: 20px; /* Add margin for spacing */
}
.contact-details p {
line-height: 1.6; /* Improve line height for readability */
margin: 10px 0; /* Space between paragraphs */
}
.contact-details p i {
margin-right: 10px; /* Space between icon and text */
}
/* Social Media Button Styles */
.social-button {
list-style: none; /* Remove list styling */
padding: 0; /* Remove padding */
display: flex; /* Flexbox for horizontal layout */
justify-content: center; /* Center the buttons */
}
.social-button li {
margin: 0 10px; /* Space between social buttons */
}
.social-button a {
color: #18d777; /* Icon color to match titles */
transition: color 0.3s; /* Smooth transition for hover effect */
}
.social-button a:hover {
color: #fff; /* Change color on hover */
}
/* Responsive Adjustments */
@media only screen and (max-width: 768px) {
.row {
flex-direction: column; /* Stack columns on smaller screens */
}
.col-md-6 {
margin-bottom: 20px; /* Space between stacked columns */
}
}
/*============================================================
Google Maps
==============================================================*/
#google-map {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#google-map > div {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/*============================================================
Footer
==============================================================*/
#footer {
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
padding: 24px 0;
color: #fff;
border-top: 1px solid #4dcdac22;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.footer-content {
text-align: center;
color: #fff;
max-width: 500px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.footer-license {
padding: 0;
margin: 0;
}
.footer-license p {
margin: 8px 0;
color: #b2b2b2;
font-size: 14px;
font-family: 'Poppins', 'Roboto', sans-serif;
line-height: 1.4;
font-weight: 400;
transition: color 0.3s ease;
}
.footer-license p:first-child {
color: #e6ffe6;
font-weight: 600;
font-size: 16px;
margin-bottom: 12px;
letter-spacing: 0.5px;
}
.footer-license p:last-child {
color: #4dcdac;
font-size: 13px;
font-weight: 500;
opacity: 0.8;
font-style: italic;
}
/* Responsive Footer */
@media (max-width: 480px) {
.footer-content {
padding: 0 16px;
}
.footer-license p {
font-size: 13px;
}
.footer-license p:first-child {
font-size: 15px;
}
.footer-license p:last-child {
font-size: 12px;
}
}
.subscribe-form {
position: relative;
}
.subscribe.form-control {
background-color: transparent;
border: 1px solid #7f7f7f;
}
.subscribe.form-control:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.submit-icon {
background-color: #7f7f7f;
border: 0 none;
border-radius: 0;
color: #c1c1c1;
padding: 13px 20px;
position: absolute;
overflow: hidden;
right: 0;
top: 0;
}
.submit-icon .fa-paper-plane {
position: relative;
top: 0;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition: all 0.3s ease 0.2s;
-moz-transition: all 0.3s ease 0.2s;
-ms-transition: all 0.3s ease 0.2s;
-o-transition: all 0.3s ease 0.2s;
transition: all 0.3s ease 0.2s;
}
.submit-icon:hover .fa-paper-plane {
position: relative;
top: -37px;
-webkit-transform: translateX(30px);
-moz-transform: translateX(30px);
-ms-transform: translateX(30px);
-o-transform: translateX(30px);
transform: translateX(30px);
}
.footer-content .footer-social {
margin: 40px 0 35px;
}
.footer-social ul {
list-style: outside none none;
margin: 0;
padding: 0;
text-align: center;
}
.footer-social ul li {
display: inline-block;
margin: 0 10px;
}
.footer-social ul li a {
color: #7f7f7f;
display: block;
-webkit-transition: all 0.2s ease 0s;
-moz-transition: all 0.2s ease 0s;
-ms-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
}
.footer-social ul li a:hover {
color: #18d777;
}
.footer-content > p {
color: #ababab;
font-size: 12px;
}
/*============================================================
Responsive Styles
============================================================*/
/*============================================================
For Small Desktop
==============================================================*/
@media (min-width: 980px) and (max-width: 1150px) {
/*about*/
#about .welcome-block img {
margin-bottom: 30px;
}
/* portfolio */
figcaption.mask {
bottom: -151px;
}
.testimonial-item > div:after {
bottom: -40px;
}
}
/*============================================================
Tablet (Portrait) Design for a width of 768px
==============================================================*/
@media (min-width: 768px) and (max-width: 979px) {
/* home slider */
.caption-content h2 {
font-size: 40px;
}
.caption-content p {
font-size: 25px;
}
.caption-content strong {
font-size: 45px;
}
/* about */
.recent-works {
margin-bottom: 50px;
}
.service-item {
margin-bottom: 50px;
}
/* portfolio */
.portfolio-item {
width: 48%;
}
/* testimonial */
.testimonial-item {
width: 100%;
}
.testimonial-item {
width: 80%;
}
.testimonial-item > div:after {
bottom: -35px;
}
/* price */
.price-table {
margin-bottom: 50px;
}
/* contact form */
.contact-form {
margin-bottom: 50px;
}
}
/*============================================================
Mobile (Portrait) Design for a width of 320px
==============================================================*/
@media only screen and (max-width: 767px) {
body {
font-size: 14px;
}
.parallax {
background-position: centet tip !important;
}
.sec-title h2 {
font-size: 25px;
}
.sec-title h2:after {
left: 30%;
}
/*navigation*/
.navbar-inverse .navbar-toggle {
border-color: #fff;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
background-color: transparent;
}
/* Enhanced Mobile Hero Section */
#home {
height: 100vh !important;
min-height: 600px !important;
}
.caption-content {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
text-align: center !important;
width: 90% !important;
max-width: 500px !important;
padding: 20px !important;
background: none !important;
border-radius: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
max-height: 90vh !important;
overflow: visible !important;
}
.caption-content h2 {
font-size: 24px !important;
font-weight: 700 !important;
margin-bottom: 15px !important;
line-height: 1.3 !important;
}
.caption-content > span {
font-size: 18px !important;
margin-bottom: 20px !important;
display: block !important;
}
.caption-content p {
font-size: 16px !important;
margin-bottom: 25px !important;
line-height: 1.5 !important;
}
.caption-content strong {
font-size: 20px !important;
}
.btn-demo {
font-size: 16px !important;
padding: 12px 24px !important;
border-radius: 25px !important;
display: inline-block !important;
margin-top: 10px !important;
}
/* about */
.recent-works {
margin-bottom: 85px;
}
#about h3 {
font-size: 18px;
margin: 0 0 35px !important;
}
#about .owl-buttons {
margin-top: 20px;
}
#about .message-body {
margin-bottom: 45px;
}
#about .welcome-block img {
margin: 0 25px 15px 0;
}
/* service */
.service-item {
width: 100%;
}
/*portfolio*/
.portfolio-item {
margin: 0 auto 10px;
font-size: 14px;
width: 280px;
}
figcaption.mask {
bottom: -107px;
color: #fff;
padding: 15px;
}
/* lightbox */
.fancybox-title h3 {
font-size: 20px;
}
.fancybox-title p {
font-size: 14px;
}
/* testimonial */
.testimonial-item {
width: 95%;
}
.testimonial-item > div:before,
.testimonial-item > div:after {
background-image: none;
}
.testimonial-item > div > span {
margin: 30px 0 20px;
}
/* price */
.price-table {
margin-bottom: 50px;
}
/* follow us */
.social-button li:nth-child(2) {
margin: 0 25px;
}
.social-button li a {
height: 65px;
line-height: 71px;
width: 65px;
}
/* contact form */
.contact-form {
margin-bottom: 50px;
}
/* footer */
.footer-content {
width: 100%;
}
.footer-license p {
font-size: 13px;
}
.footer-license p:first-child {
font-size: 15px;
}
.footer-license p:last-child {
font-size: 12px;
}
.footer-social ul li {
margin: 0 7px;
}
}
/* Style for the timeline section with background image */
/* Timeline Container */
.timeline-section {
background: linear-gradient(135deg, #181f24 60%, #232b2f 100%);
padding: 64px 0 64px 0;
margin: 0;
overflow-x: hidden !important;
}
.timeline-title-centered {
text-align: center;
margin-bottom: 32px !important;
}
.timeline-title-centered h2 {
color: #4dcdac !important;
font-size: 2.2rem;
margin-bottom: 0;
text-shadow: 0 2px 12px #0005;
}
.timeline-centered {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 auto;
max-width: 700px;
width: 100%;
background: transparent !important;
border-radius: 0;
box-shadow: none !important;
padding: 36px 18px 36px 18px;
}
.timeline {
position: relative;
width: 100%;
padding: 0;
list-style: none;
}
.timeline-item {
padding: 32px 24px 32px 60px;
position: relative;
border-left: 4px solid #4dcdac;
margin-bottom: 36px;
background: rgba(255,255,255,0.04);
border-radius: 12px;
box-shadow: 0 2px 12px #4dcdac11;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-item::before {
content: '';
position: absolute;
top: 32px;
left: -14px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #4dcdac;
border: 4px solid #fff;
box-shadow: 0 0 0 4px #4dcdac44;
z-index: 2;
}
.timeline-date {
font-size: 1rem;
font-weight: 700;
color: #4dcdac;
position: absolute;
left: -160px;
top: 32px;
background: #232b2f;
padding: 6px 16px;
border-radius: 8px;
box-shadow: 0 2px 8px #0002;
text-align: center;
}
.timeline-content {
background: none;
padding: 0;
border-radius: 0;
box-shadow: none;
position: relative;
z-index: 1;
color: #fff;
text-align: left;
}
.timeline-content h3 {
margin-top: 0;
color: #4dcdac;
font-size: 1.25rem;
margin-bottom: 8px;
}
.timeline-content p {
color: #e6ffe6;
margin-bottom: 0;
font-size: 18px;
line-height: 1.6;
}
@media screen and (max-width: 900px) {
.timeline-date {
left: 0;
top: -24px;
position: relative;
margin-bottom: 10px;
padding: 4px 8px;
}
.timeline-item {
padding-left: 24px;
}
.timeline-centered {
padding: 18px 2vw 18px 2vw;
}
}
@media screen and (max-width: 600px) {
.timeline-title-centered h2 {
font-size: 1.2rem;
}
.timeline-item {
padding: 18px 4px 18px 18px;
max-width: 98vw;
}
.timeline-date {
font-size: 0.9rem;
left: 0;
top: -18px;
padding: 3px 6px;
}
}
.fa.fa-twitter::before {
display: inline-block;
width: 1em;
height: 1em;
content: "";
background-color: currentColor; /* Use current color */
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
background-position: center ; /* Adjust to move the icon up slightly */
background-size: contain; /* Ensures the entire icon fits within */
margin: 0 auto; /* Centers the icon */
vertical-align: middle; /* Aligns it with other inline elements */
}
.fab.fa-twitter::before {
display: inline-block;
width: 1.5em;
height: 1.5em;
content: "";
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center;
mask: url('data:image/svg+xml;utf8,') no-repeat center;
background-position: center 3px;
}
/* --- Redesigned About Section Styles --- */
#about {
background: linear-gradient(135deg, #101820 60%, #18d777 100%);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 60px 0 40px 0;
min-height: 400px;
position: relative;
overflow: visible;
}
/* About section: match typography and width to other sections */
.about-content-centered {
align-items: flex-start;
justify-content: flex-start;
width: 100%;
display: flex;
flex-direction: column;
}
.about-card {
background: rgba(24,31,36,0.98);
border-radius: 18px;
box-shadow: 0 4px 32px #0003;
border: 1.5px solid #4dcdac33;
padding: 32px 24px 24px 24px;
color: #fff;
margin: 0 auto;
max-width: 700px;
width: 100%;
display: block;
}
/* Enhanced Mobile Layout for All Sections */
@media (max-width: 700px) {
/* Fix About Section Mobile Display */
#about {
padding: 60px 0 0 0 !important;
min-height: auto !important;
margin-bottom: 0 !important;
overflow: visible !important;
}
.about-card {
padding: 30px 3vw 30px 3vw !important;
max-width: 92vw !important;
margin: 0 auto !important;
border-radius: 15px !important;
min-height: auto !important;
overflow: visible !important;
box-sizing: border-box !important;
}
.about-content-centered {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.about-card .intro-text {
font-size: 16px !important;
line-height: 1.6 !important;
margin-bottom: 20px !important;
}
.action-list {
padding-left: 20px !important;
margin-bottom: 20px !important;
}
.action-list li {
font-size: 15px !important;
margin-bottom: 8px !important;
line-height: 1.5 !important;
}
.conclusion-text {
font-size: 15px !important;
line-height: 1.6 !important;
}
/* Ensure About Section is fully visible */
.about-wide {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.about-content {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Service Section Mobile */
#service {
padding: 0 0 40px 0 !important;
}
#service .service-item {
margin-bottom: 30px !important;
padding: 20px 15px !important;
border-radius: 15px !important;
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 1px solid rgba(77, 205, 172, 0.2) !important;
}
#service .service-icon {
margin-bottom: 15px !important;
}
#service .service-icon i {
font-size: 2.5rem !important;
color: #4dcdac !important;
}
#service .service-item h3 {
font-size: 18px !important;
margin-bottom: 10px !important;
}
#service .service-item p {
font-size: 14px !important;
line-height: 1.5 !important;
}
/* Contact Section Mobile */
#contact-form-centered {
padding: 40px 0 !important;
}
.contact-grid-form {
padding: 20px 4vw !important;
max-width: 95vw !important;
margin: 0 auto !important;
}
.contact-grid-form .form-group {
margin-bottom: 20px !important;
}
.contact-grid-form .form-group label {
font-size: 14px !important;
margin-bottom: 8px !important;
color: #4dcdac !important;
}
.contact-grid-form .form-control {
font-size: 16px !important;
padding: 12px 15px !important;
border-radius: 8px !important;
border: 2px solid rgba(77, 205, 172, 0.3) !important;
background: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
}
.contact-grid-form .form-control:focus {
border-color: #4dcdac !important;
box-shadow: 0 0 0 3px rgba(77, 205, 172, 0.2) !important;
background: rgba(255, 255, 255, 0.15) !important;
}
.contact-grid-form textarea.form-control {
min-height: 120px !important;
resize: vertical !important;
}
.btn-demo {
width: 100% !important;
font-size: 16px !important;
padding: 15px 20px !important;
border-radius: 25px !important;
margin-top: 10px !important;
}
/* Enhanced Timeline Section Mobile */
.timeline-section {
padding: 50px 0 !important;
background: black !important;
}
.timeline-title-centered h2 {
font-size: 24px !important;
margin-bottom: 30px !important;
color: #4dcdac !important;
text-align: center !important;
}
.timeline-centered {
padding: 0 4vw !important;
max-width: 100% !important;
}
.timeline-item {
padding: 25px 4vw 25px 4vw !important;
margin-bottom: 30px !important;
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px) !important;
border: 1px solid rgba(77, 205, 172, 0.3) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
position: relative !important;
border-left: 4px solid #4dcdac !important;
}
.timeline-item::before {
content: '' !important;
position: absolute !important;
top: 25px !important;
left: -8px !important;
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
background: #4dcdac !important;
border: 3px solid #fff !important;
box-shadow: 0 0 0 3px rgba(77, 205, 172, 0.3) !important;
z-index: 2 !important;
}
.timeline-date {
font-size: 16px !important;
font-weight: 700 !important;
color: #4dcdac !important;
margin-bottom: 15px !important;
display: block !important;
text-align: left !important;
}
.timeline-content h3 {
font-size: 18px !important;
margin-bottom: 12px !important;
color: #4dcdac !important;
font-weight: 600 !important;
}
.timeline-content p {
font-size: 15px !important;
line-height: 1.6 !important;
color: #e6ffe6 !important;
margin-bottom: 0 !important;
}
/* Partners and Social Section Mobile */
.partners-section, .social-media-card {
padding: 20px 4vw !important;
margin-bottom: 20px !important;
border-radius: 15px !important;
}
.partners-logos-container {
margin-top: 15px !important;
}
.partners-logos-scroll {
gap: 24px !important;
animation-duration: 15s !important;
}
.partners-logos-row {
flex-direction: column !important;
align-items: center !important;
gap: 15px !important;
}
.partner-logo {
max-width: 150px !important;
height: auto !important;
}
.social-media-row {
flex-direction: column !important;
gap: 15px !important;
}
.social-icon-link {
padding: 15px 20px !important;
border-radius: 10px !important;
background: rgba(77, 205, 172, 0.1) !important;
border: 1px solid rgba(77, 205, 172, 0.3) !important;
text-align: center !important;
transition: all 0.3s ease !important;
}
.social-icon-link:hover {
background: rgba(77, 205, 172, 0.2) !important;
transform: translateY(-2px) !important;
}
}
.about-wide {
width: 100%;
max-width: 900px;
}
#about .section-title {
font-family: 'Montserrat', 'Poppins', sans-serif;
font-size: 38px;
font-weight: 700;
color: #4dcdac;
margin-bottom: 18px;
text-align: left;
text-shadow: none;
position: relative;
}
#about .section-title:after {
content: "";
display: block;
width: 60px;
height: 4px;
background: #4dcdac;
margin: 10px 0 0 0;
border-radius: 2px;
}
.about-card .intro-text, .about-card .conclusion-text {
font-size: 18px;
line-height: 1.6;
font-family: 'Poppins', 'Roboto', sans-serif;
color: #e6ffe6;
text-align: left;
margin-bottom: 18px;
}
/* About section action list with modern checkmarks */
.about-card .action-list {
list-style: none;
padding: 0;
margin-bottom: 18px;
}
.about-card .action-list li {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
font-size: 18px;
color: #fff;
font-family: 'Poppins', 'Roboto', sans-serif;
position: relative;
padding-left: 0;
}
.about-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #4dcdac;
color: #fff;
font-size: 15px;
font-weight: bold;
flex-shrink: 0;
margin-top: -1px;
box-shadow: 0 2px 8px #4dcdac33;
}
.about-check::before {
content: '\2714'; /* Unicode checkmark */
font-size: 15px;
line-height: 1;
display: block;
}
/* Remove old bullet animation for about section */
.about-card .action-list li::before {
display: none !important;
}
.about-divider {
width: 60px;
height: 3px;
background: #4dcdac;
border-radius: 2px;
margin: 28px auto 24px auto;
opacity: 0.7;
}
.about-highlight {
color: #4dcdac;
font-weight: 600;
letter-spacing: 0.5px;
}
@media (max-width: 991px) {
.about-card, .about-wide {
max-width: 98vw;
}
#about .section-title {
font-size: 28px;
}
.about-card .intro-text, .about-card .conclusion-text, .about-card .action-list {
font-size: 16px;
}
}
/* About section improved title and subtitle */
.about-title {
font-size: 28px !important;
font-weight: 600;
color: #18d777;
margin-bottom: 4px;
letter-spacing: 0.5px;
text-align: left;
font-family: 'Montserrat', 'Poppins', sans-serif;
border: none;
background: none;
box-shadow: none;
}
.about-title:after {
display: none !important;
}
.about-subtitle {
font-size: 18px;
color: #b2ffda;
font-family: 'Poppins', 'Roboto', sans-serif;
font-weight: 400;
margin-bottom: 18px;
margin-top: 0;
text-align: left;
letter-spacing: 0.2px;
}
#home .caption-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 100%;
z-index: 2;
text-align: center;
box-sizing: border-box;
}
.caption-title {
font-size: 2.2rem;
font-weight: 700;
color: #fff;
margin-bottom: 18px;
text-shadow: 0 4px 24px rgba(0,0,0,0.28);
letter-spacing: 1px;
font-family: 'Montserrat', 'Poppins', sans-serif;
}
.caption-subtitle {
color: #fff;
font-size: 1.35rem;
font-weight: 500;
max-width: 600px;
margin: 0 0 32px 0;
line-height: 1.5;
text-shadow: 0 4px 24px rgba(0,0,0,0.28);
font-family: 'Poppins', 'Roboto', sans-serif;
}
.btn-demo {
display: inline-block;
background: #4dcdac;
color: #fff;
font-size: 1.1rem;
font-weight: 600;
padding: 14px 36px;
border-radius: 32px;
border: none;
box-shadow: 0 2px 12px #4dcdac33;
text-decoration: none;
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
margin-top: 8px;
}
.btn-demo:hover, .btn-demo:focus {
background: #38b836;
color: #fff;
box-shadow: 0 4px 24px #4dcdac55;
text-decoration: none;
}
@media (max-width: 700px) {
.caption-title {
font-size: 1.2rem;
}
.caption-subtitle {
font-size: 1rem;
max-width: 90vw;
}
.btn-demo {
font-size: 1rem;
padding: 10px 18px;
}
}
.eutropy-brand {
font-family: 'Poppins', 'Montserrat', sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: 0.2px;
color: #fff;
text-shadow: none;
margin-left: 0;
margin-right: 0;
line-height: 1;
display: inline-block;
position: relative;
}
.partners-section {
background: none !important;
padding: 0 !important;
box-shadow: none !important;
margin-bottom: 0;
}
.partners-section .section-title {
color: #4dcdac;
font-size: 2rem;
margin-bottom: 36px;
text-align: center;
}
/* Partners Logos Scrolling Container */
.partners-logos-container {
width: 100%;
overflow: hidden;
position: relative;
margin-top: 20px;
height: 100px;
display: block !important;
}
.partners-logos-scroll {
display: flex !important;
align-items: center;
gap: 32px;
animation: scroll-logos 25s linear infinite;
white-space: nowrap;
width: max-content; /* Let it size to content */
height: 100px;
position: relative;
}
.partners-logos-scroll:hover {
animation-play-state: paused;
}
@keyframes scroll-logos {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-100% / 2)); /* Move exactly half the total width (first set of logos) */
}
}
/* Desktop-specific logo visibility fix */
@media (min-width: 769px) {
.partners-logos-container {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.partners-logos-scroll {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.partners-logos-scroll .partner-logo {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: auto !important;
}
}
/* Supporters Section Styling */
.supporters-section {
text-align: center;
width: 100%;
}
.supporters-section .section-title {
color: #4dcdac;
font-size: 2.5rem;
margin-bottom: 40px;
text-align: center;
font-weight: 700;
}
/* Footer Social Media Styling */
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-license {
flex: 1;
min-width: 300px;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-license-text {
flex: 1;
}
.footer-social {
display: flex;
align-items: center;
gap: 15px;
flex-shrink: 0;
margin-left: 20px;
}
.footer-social-links {
display: flex;
gap: 15px;
}
.footer-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(77, 205, 172, 0.1);
border: 2px solid rgba(77, 205, 172, 0.3);
border-radius: 50%;
color: #4dcdac;
text-decoration: none;
transition: all 0.3s ease;
font-size: 18px;
}
.footer-social-link:hover {
background: rgba(77, 205, 172, 0.2);
border-color: #4dcdac;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(77, 205, 172, 0.3);
}
/* Mobile Footer Adjustments */
@media (max-width: 768px) {
.footer-content {
flex-direction: column;
text-align: center;
gap: 30px;
}
.footer-license {
min-width: auto;
width: 100%;
flex-direction: column;
gap: 20px;
}
.footer-license-text {
width: 100%;
}
.footer-social {
justify-content: center;
margin-left: 0;
}
.supporters-section .section-title {
font-size: 2rem;
margin-bottom: 30px;
}
}
.partners-logos-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
min-height: 80px;
}
.partner-logo {
max-width: 180px;
max-height: 80px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(0.2) brightness(0.98) drop-shadow(0 2px 8px #0002);
transition: filter 0.2s, transform 0.2s;
background: #fff;
border-radius: 10px;
padding: 10px 18px;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
flex-shrink: 0 !important;
position: relative !important;
}
.partner-logo:hover {
filter: grayscale(0) brightness(1.1) drop-shadow(0 4px 16px #4dcdac44);
transform: scale(1.06);
background: #f6fff6;
}
@media (max-width: 700px) {
.partners-logos-row {
gap: 18px;
}
.partner-logo {
max-width: 110px;
max-height: 50px;
padding: 6px 8px;
}
.partners-section .section-title {
font-size: 1.2rem;
}
}
@media (min-width: 768px) {
.partners-section, .social-media-card {
display: flex;
flex-direction: column;
justify-content: center;
height: 180px !important;
min-height: unset !important;
}
}
@media (max-width: 767px) {
.partners-section, .social-media-card {
min-height: unset;
margin-bottom: 24px;
}
.row > .col-md-6 {
margin-bottom: 32px;
}
}
.classy-contact-form {
background: rgba(24,31,36,0.98);
border-radius: 18px;
box-shadow: 0 4px 32px #0003;
padding: 36px 18px 28px 18px;
color: #fff;
margin: 32px auto 18px auto;
max-width: 900px;
width: 100%;
display: block;
border: 1.5px solid #4dcdac33;
}
.classy-contact-form .form-group {
margin-bottom: 22px;
}
.classy-contact-form label {
font-family: 'Poppins', 'Montserrat', sans-serif;
font-weight: 600;
color: #4dcdac;
margin-bottom: 8px;
display: block;
font-size: 1.15rem;
}
.classy-contact-form .form-control {
width: 100%;
padding: 18px 10px;
border-radius: 8px;
border: 1.5px solid #4dcdac44;
background: #232b2f;
color: #fff;
font-size: 1.18rem;
font-family: 'Poppins', 'Roboto', sans-serif;
margin-top: 6px;
margin-bottom: 0;
transition: border 0.2s, box-shadow 0.2s;
box-shadow: 0 2px 12px #4dcdac11;
}
.classy-contact-form .form-control:focus {
border: 1.5px solid #4dcdac;
outline: none;
box-shadow: 0 0 0 2px #4dcdac33;
background: #232b2f;
}
.classy-contact-form textarea.form-control {
min-height: 120px;
max-height: 220px;
resize: vertical;
}
.classy-contact-form .row {
display: block;
flex-wrap: unset;
gap: unset;
margin-left: unset;
margin-right: unset;
}
.classy-contact-form .form-group.col-12.col-md-6 {
flex: unset;
min-width: unset;
margin-bottom: unset;
}
.classy-contact-form .form-group {
margin-bottom: 22px;
}
.classy-contact-form .btn-demo {
width: 100%;
margin-top: 18px;
font-size: 1.22rem;
padding: 18px 0;
border-radius: 32px;
background: #4dcdac;
color: #fff;
font-weight: 700;
box-shadow: 0 2px 12px #4dcdac33;
border: none;
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.classy-contact-form .btn-demo:hover, .classy-contact-form .btn-demo:focus {
background: #38b836;
color: #fff;
box-shadow: 0 4px 24px #4dcdac55;
}
@media (max-width: 1000px) {
.classy-contact-form {
max-width: 98vw;
padding: 18px 2vw 18px 2vw;
}
}
.social-media-card {
background: rgba(24,31,36,0.98);
border-radius: 18px;
box-shadow: 0 4px 32px #0003;
padding: 32px 18px 24px 18px;
text-align: center;
margin: 32px auto 0 auto;
max-width: 400px;
}
.social-media-title {
font-family: 'Poppins', 'Montserrat', sans-serif;
font-size: 1.2rem;
color: #4dcdac;
font-weight: 700;
margin-bottom: 18px;
letter-spacing: 0.5px;
}
.social-media-row {
display: flex;
justify-content: center;
align-items: center;
gap: 36px;
}
.social-icon-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
color: #fff;
font-size: 3rem;
transition: color 0.2s;
text-decoration: none;
min-height: 80px;
width: 120px;
}
.social-icon-link:hover,
.social-icon-link:focus {
color: #4dcdac;
}
.social-icon-link i {
display: flex;
align-items: center;
justify-content: center;
height: 3rem;
width: 100%;
margin-bottom: 8px;
}
.social-icon-link span {
font-size: 1rem;
color: #e6ffe6;
font-family: 'Poppins', 'Roboto', sans-serif;
font-weight: 500;
letter-spacing: 0.2px;
text-align: center;
width: 100%;
display: block;
line-height: 1.2;
}
@media (max-width: 700px) {
.social-media-card {
padding: 18px 4vw 18px 4vw;
max-width: 98vw;
}
.social-media-row {
gap: 18px;
align-items: center;
}
.social-icon-link {
font-size: 1.3rem;
min-height: 60px;
width: 100px;
}
.social-icon-link i {
height: 1.3rem;
margin-bottom: 6px;
}
.social-icon-link span {
font-size: 0.9rem;
text-align: center;
width: 100%;
display: block;
line-height: 1.2;
}
}
.contact-center-row {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 0;
}
.contact-center-col {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.contact-form-center {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
body, html {
font-family: 'Poppins', 'Montserrat', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.section-title, .section-title h2, .social-media-title, label, .form-control, .btn-demo {
font-family: 'Poppins', 'Montserrat', sans-serif !important;
}
.section-title, .section-title h2, .social-media-title {
font-size: 2.2rem !important;
font-weight: 700 !important;
color: #4dcdac !important;
text-align: center !important;
margin-top: 0 !important;
margin-bottom: 40px !important;
text-shadow: 0 2px 12px #0005 !important;
background: none !important;
border: none !important;
box-shadow: none !important;
letter-spacing: 0.5px;
line-height: 1.1;
position: relative;
}
.section-title:after, .section-title h2:after, .social-media-title:after {
content: "";
display: block;
width: 60px;
height: 4px;
background: #4dcdac;
margin: 10px auto 0 auto;
border-radius: 2px;
}
@media (max-width: 700px) {
.section-title, .section-title h2, .social-media-title {
font-size: 1.2rem !important;
}
}
.partners-section, .social-media-card {
background: rgba(24,31,36,0.98) !important;
border-radius: 18px;
box-shadow: 0 4px 32px #0003;
padding: 32px 18px 24px 18px;
text-align: center;
margin: 0 auto 0 auto;
width: 100%;
border: 1.5px solid #4dcdac33;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 340px;
flex: 1 1 0;
max-width: none;
}
.row > .col-md-6 {
display: flex;
align-items: stretch;
}
@media (max-width: 900px) {
.partners-section, .social-media-card {
max-width: 98vw;
padding: 18px 4vw 18px 4vw;
min-height: unset;
}
.row > .col-md-6 {
align-items: initial;
}
}
.contact-grid-form .contact-grid-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 32px;
margin-bottom: 18px;
}
.contact-grid-form .contact-grid-fields .form-group {
display: flex;
flex-direction: column;
margin-bottom: 0;
}
.contact-grid-form .form-group label {
margin-bottom: 8px;
font-size: 1.15rem;
color: #4dcdac;
font-weight: 600;
}
.contact-grid-form .form-group input.form-control {
width: 100%;
font-size: 1.18rem;
padding: 18px 10px;
}
.contact-grid-form textarea.form-control {
width: 100%;
font-size: 1.18rem;
padding: 18px 10px;
min-height: 120px;
max-height: 220px;
}
.contact-grid-form .form-group:last-of-type {
grid-column: 1 / -1;
}
@media (max-width: 900px) {
.contact-grid-form .contact-grid-fields {
grid-template-columns: 1fr;
gap: 12px 0;
}
.contact-grid-form .form-group input.form-control,
.contact-grid-form textarea.form-control {
font-size: 1rem;
padding: 12px 10px;
}
}
#about {
position: relative;
overflow: hidden;
}
.about-electric-lines {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
z-index: 1;
pointer-events: none;
}
.about-electric-lines span,
.about-electric-lines::before,
.about-electric-lines::after {
content: '';
position: absolute;
height: 2px;
width: 120vw;
background: linear-gradient(90deg, transparent 0%, #4dcdac 40%, #4dcdac 60%, transparent 100%);
box-shadow: 0 0 16px 2px #4dcdac99, 0 0 32px 4px #4dcdac33;
opacity: 0.7;
border-radius: 2px;
filter: blur(0.5px);
}
.about-electric-lines::before {
top: 20%; left: -10vw;
animation: electric-line-move 7s linear infinite;
}
.about-electric-lines::after {
top: 60%; left: -20vw;
animation: electric-line-move 9s linear infinite reverse;
}
.about-electric-lines span.line1 {
top: 40%; left: -15vw;
animation: electric-line-move 11s linear infinite;
}
.about-electric-lines span.line2 {
top: 80%; left: -5vw;
animation: electric-line-move 13s linear infinite reverse;
}
@keyframes electric-line-move {
0% { transform: translateX(0); opacity: 0.7; }
10% { opacity: 1; }
50% { opacity: 0.8; }
90% { opacity: 1; }
100% { transform: translateX(30vw); opacity: 0.7; }
}
#about > .container, #about .about-content-centered, #about .about-card {
position: relative;
z-index: 2;
}
.about-green {
color: #4dcdac;
font-weight: 600;
}
.timeline-content p {
color: #e6ffe6;
margin-bottom: 0;
font-size: 1.15rem;
line-height: 1.6;
}
.timeline-content h3 {
margin-top: 0;
color: #4dcdac;
font-size: 1.5rem;
margin-bottom: 8px;
}
section, #about, #service, #timeline, #contact, #contact-form-centered, #partners {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
/* Enhanced Mobile Typography and Spacing */
@media (max-width: 700px) {
section, #about, #service, #timeline, #contact, #contact-form-centered, #partners {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
/* Enhanced Typography for Mobile */
.section-title {
font-size: 24px !important;
margin-bottom: 25px !important;
text-align: center !important;
line-height: 1.3 !important;
}
.section-title h2 {
font-size: 24px !important;
margin-bottom: 25px !important;
}
/* Better spacing for mobile */
.container {
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Mobile-specific button styles */
.btn-demo {
font-size: 16px !important;
font-weight: 600 !important;
padding: 15px 30px !important;
border-radius: 25px !important;
text-transform: none !important;
letter-spacing: 0.5px !important;
transition: all 0.3s ease !important;
display: inline-block !important;
text-align: center !important;
text-decoration: none !important;
border: none !important;
cursor: pointer !important;
background: linear-gradient(135deg, #4dcdac, #3bc73b) !important;
color: #fff !important;
box-shadow: 0 4px 15px rgba(77, 205, 172, 0.3) !important;
}
.btn-demo:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(77, 205, 172, 0.4) !important;
background: linear-gradient(135deg, #3bc73b, #2aa32a) !important;
}
/* Mobile form improvements */
.form-control::placeholder {
color: rgba(255, 255, 255, 0.6) !important;
font-size: 14px !important;
}
/* Mobile image optimizations */
.product-interface-image img {
width: 100% !important;
height: auto !important;
border-radius: 10px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}
/* Mobile scroll improvements */
html {
scroll-behavior: smooth !important;
}
/* Mobile touch improvements */
.navbar-inverse .navbar-nav > li > a,
.language-btn,
.btn-demo,
.social-icon-link {
-webkit-tap-highlight-color: rgba(77, 205, 172, 0.3) !important;
touch-action: manipulation !important;
}
/* Mobile viewport optimizations */
body {
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
}
/* Mobile performance optimizations */
.video-background {
will-change: transform !important;
}
.caption-content {
will-change: transform !important;
}
}
.section-title, .section-title h2, .social-media-title {
margin-bottom: 28px !important;
}
.contact-info {
text-align: center;
font-size: 1.08rem;
color: #e6ffe6;
margin-bottom: 18px;
font-family: 'Poppins', 'Montserrat', sans-serif;
}
.contact-info a {
color: #4dcdac;
font-weight: 600;
text-decoration: none;
}
.contact-info a:hover {
text-decoration: underline;
}
.timeline-section .container {
display: block !important;
flex-direction: unset !important;
gap: unset !important;
align-items: unset !important;
justify-content: unset !important;
}
.timeline-progress-bar {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 420px;
min-width: 32px;
position: relative;
margin-top: 24px;
}
.timeline-progress-bar::before {
content: '';
position: absolute;
left: 50%;
top: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #4dcdac 0%, #232b2f 100%);
border-radius: 2px;
transform: translateX(-50%);
z-index: 0;
opacity: 0.7;
}
.timeline-dot {
width: 22px;
height: 22px;
border-radius: 50%;
background: #4dcdac;
box-shadow: 0 0 16px 4px #4dcdac66, 0 0 32px 8px #4dcdac33;
margin: 0 0 0 0;
z-index: 1;
animation: timeline-dot-pulse 2s infinite;
}
.timeline-dot:not(:last-child) {
margin-bottom: 48px;
}
@keyframes timeline-dot-pulse {
0% { box-shadow: 0 0 0 #4dcdac; }
50% { box-shadow: 0 0 16px 4px #4dcdac66, 0 0 32px 8px #4dcdac33; }
100% { box-shadow: 0 0 0 #4dcdac; }
}
@media (max-width: 900px) {
.timeline-section .container {
flex-direction: column;
gap: 0;
align-items: center;
}
.timeline-progress-bar {
flex-direction: row;
height: 32px;
min-width: unset;
width: 220px;
margin: 32px auto 0 auto;
}
.timeline-progress-bar::before {
width: 100%;
height: 4px;
left: 0;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(90deg, #4dcdac 0%, #232b2f 100%);
}
.timeline-dot {
margin-bottom: 0;
margin-right: 24px;
}
.timeline-dot:last-child {
margin-right: 0;
}
}
.product-interface-container {
background: rgba(24,31,36,0.98);
border-radius: 18px;
box-shadow: 0 4px 32px #0003;
padding: 36px 18px 28px 18px;
color: #fff;
margin: 32px auto 18px auto;
max-width: 900px;
width: 100%;
display: block;
border: 1.5px solid #4dcdac33;
height: 570px;
overflow-y: auto;
overflow-x: hidden;
}
.product-interface-container::-webkit-scrollbar {
width: 8px;
}
.product-interface-container::-webkit-scrollbar-track {
background: rgba(77, 205, 172, 0.1);
border-radius: 4px;
}
.product-interface-container::-webkit-scrollbar-thumb {
background: #4dcdac;
border-radius: 4px;
}
.product-interface-container::-webkit-scrollbar-thumb:hover {
background: #38b836;
}
.product-interface-images {
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
}
.product-interface-image {
width: 100%;
max-width: 500px;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(77, 205, 172, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-interface-image:hover {
transform: scale(1.02);
box-shadow: 0 6px 32px rgba(77, 205, 172, 0.3);
}
.product-interface-image img {
width: 100%;
height: auto;
border-radius: 12px;
}
/* Extra Small Mobile Devices */
@media (max-width: 480px) {
.caption-content {
width: 95% !important;
padding: 15px !important;
}
.caption-content h2 {
font-size: 20px !important;
}
.caption-content p {
font-size: 14px !important;
}
.section-title {
font-size: 20px !important;
}
/* Enhanced About Section for Small Screens */
#about {
padding: 40px 0 0 0 !important;
margin-bottom: 0 !important;
}
.about-card {
padding: 20px 2vw 20px 2vw !important;
max-width: 96vw !important;
margin: 0 auto !important;
}
.about-card .intro-text {
font-size: 15px !important;
line-height: 1.5 !important;
margin-bottom: 15px !important;
}
.action-list li {
font-size: 14px !important;
margin-bottom: 6px !important;
}
.conclusion-text {
font-size: 14px !important;
line-height: 1.5 !important;
}
.service-item {
padding: 15px 10px !important;
}
.contact-grid-form {
padding: 15px 3vw !important;
}
/* Enhanced Timeline for Extra Small Screens */
.timeline-section {
padding: 40px 0 !important;
}
.timeline-title-centered h2 {
font-size: 20px !important;
margin-bottom: 25px !important;
}
.timeline-item {
padding: 20px 3vw 20px 3vw !important;
margin-bottom: 25px !important;
border-radius: 15px !important;
}
.timeline-item::before {
top: 20px !important;
left: -6px !important;
width: 14px !important;
height: 14px !important;
}
.timeline-date {
font-size: 14px !important;
margin-bottom: 12px !important;
}
.timeline-content h3 {
font-size: 16px !important;
margin-bottom: 10px !important;
}
.timeline-content p {
font-size: 14px !important;
line-height: 1.5 !important;
}
.partners-section, .social-media-card {
padding: 15px 3vw !important;
}
.btn-demo {
font-size: 14px !important;
padding: 12px 20px !important;
}
}
/* Mobile rotation fixes */
@media (orientation: landscape) and (max-height: 500px) {
/* Fix demo button visibility on mobile landscape */
.btn-demo {
font-size: 14px !important;
padding: 12px 24px !important;
margin: 10px auto !important;
min-width: 180px !important;
position: relative !important;
z-index: 10 !important;
}
.caption-content {
padding: 20px 0 !important;
max-height: 80vh !important;
}
/* The hamburger toggle + collapsible dropdown are left alone here (no
longer forced into an inline nav row): the max-width:991px rules above
already make the hamburger toggle visible and the dropdown open/close
correctly at these widths regardless of orientation. Forcing the
toggle hidden and the dropdown inline here used to fight that block's
higher-specificity `.navbar-inverse .navbar-collapse.collapse` rule -
the toggle would hide (this rule loads later, so it won by source
order) but the dropdown stayed hidden too (that rule wins on
specificity), leaving no way to open the menu at all in landscape on
phones like the Galaxy A51 or Pixel 7 (~830-915px wide here). */
}
/* Ultra-wide landscape devices (like S20 Ultra) */
@media (orientation: landscape) and (min-width: 1000px) and (max-height: 400px) {
.caption-content {
max-height: 30vh !important;
padding: 0px !important;
top: 15% !important;
transform: translate(-50%, -15%) !important;
width: 99% !important;
margin-bottom: 50px !important;
}
.caption-content h2 {
font-size: 11px !important;
margin-bottom: 0px !important;
line-height: 1.0 !important;
}
.caption-content p {
font-size: 8px !important;
margin-bottom: 2px !important;
line-height: 1.0 !important;
}
.btn-demo {
font-size: 8px !important;
padding: 2px 8px !important;
margin: 0px auto 25px auto !important;
min-width: 80px !important;
}
}
/* iPhone 11 and similar device fixes */
@media (max-width: 414px) and (max-height: 896px) {
.caption-content {
max-height: 85vh !important;
padding: 15px !important;
}
.caption-content h2 {
font-size: 22px !important;
margin-bottom: 12px !important;
}
.caption-content p {
font-size: 15px !important;
margin-bottom: 20px !important;
}
.btn-demo {
font-size: 15px !important;
padding: 12px 25px !important;
margin: 12px auto !important;
}
}
/* iPhone 11 Pro and similar landscape fixes */
@media (orientation: landscape) and (max-width: 896px) and (max-height: 414px) {
.caption-content {
max-height: 75vh !important;
padding: 10px !important;
}
.caption-content h2 {
font-size: 20px !important;
margin-bottom: 8px !important;
}
.caption-content p {
font-size: 14px !important;
margin-bottom: 15px !important;
}
.btn-demo {
font-size: 14px !important;
padding: 10px 20px !important;
margin: 8px auto !important;
}
/* Nav toggle/dropdown left to the max-width:991px rules (see the "Mobile
rotation fixes" block above for why forcing an inline nav row here
used to hide the menu entirely on rotation). */
}
/* Samsung Galaxy S20 Ultra and similar large devices landscape fixes */
@media (orientation: landscape) and (min-width: 897px) and (max-height: 400px) {
.caption-content {
max-height: 35vh !important;
padding: 1px !important;
top: 20% !important;
transform: translate(-50%, -20%) !important;
width: 95% !important;
margin-bottom: 50px !important;
}
.caption-content h2 {
font-size: 12px !important;
margin-bottom: 1px !important;
line-height: 1.0 !important;
}
.caption-content p {
font-size: 9px !important;
margin-bottom: 3px !important;
line-height: 1.0 !important;
}
.btn-demo {
font-size: 9px !important;
padding: 3px 10px !important;
margin: 1px auto 25px auto !important;
min-width: 100px !important;
}
/* Nav toggle/dropdown left to the max-width:991px rules (see the "Mobile
rotation fixes" block above for why forcing an inline nav row here
used to hide the menu entirely on rotation). */
}
/* Specific S20 Ultra landscape fix */
@media (orientation: landscape) and (min-width: 1400px) and (max-height: 350px) {
.caption-content {
max-height: 25vh !important;
padding: 0px !important;
top: 10% !important;
transform: translate(-50%, -10%) !important;
width: 98% !important;
margin-bottom: 60px !important;
}
.caption-content h2 {
font-size: 10px !important;
margin-bottom: 0px !important;
line-height: 1.0 !important;
}
.caption-content p {
font-size: 7px !important;
margin-bottom: 2px !important;
line-height: 1.0 !important;
}
.btn-demo {
font-size: 7px !important;
padding: 1px 6px !important;
margin: 0px auto 30px auto !important;
min-width: 70px !important;
}
}
/* Samsung Galaxy S20 Ultra specific fix - 915x412 dimensions */
@media (orientation: landscape) and (min-width: 900px) and (max-width: 920px) and (min-height: 400px) and (max-height: 420px) {
.caption-content {
max-height: 25vh !important;
padding: 5px !important;
top: 8% !important;
transform: translate(-50%, -8%) !important;
width: 98% !important;
margin-bottom: 70px !important;
}
.caption-content h2 {
font-size: 16px !important;
margin-bottom: 8px !important;
line-height: 1.2 !important;
}
.caption-content p {
font-size: 12px !important;
margin-bottom: 12px !important;
line-height: 1.3 !important;
}
.btn-demo {
font-size: 14px !important;
padding: 8px 20px !important;
margin: 8px auto 35px auto !important;
min-width: 160px !important;
}
}
/* Ensure demo button is always visible on mobile */
@media (max-width: 768px) {
.btn-demo {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 10 !important;
background: #4dcdac !important;
color: #fff !important;
font-size: 16px !important;
padding: 15px 30px !important;
border-radius: 25px !important;
text-decoration: none !important;
margin: 15px auto !important;
text-align: center !important;
min-width: 200px !important;
max-width: 90% !important;
box-shadow: 0 4px 15px rgba(77, 205, 172, 0.3) !important;
}
.caption-content .btn-demo {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
}
@media (max-width: 1000px) {
.product-interface-container {
max-width: 98vw;
padding: 18px 2vw 18px 2vw;
height: auto;
min-height: 400px;
max-height: 70vh;
}
}
/* Timeline animation for better user experience */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.timeline-centered {
animation: fadeInUp 0.8s ease-out;
}
/* Implementation Section Styling */
.implementation-steps {
display: flex;
flex-direction: column;
gap: 40px;
max-width: 1000px;
margin: 0 auto;
}
.implementation-step {
display: flex;
align-items: center;
gap: 30px;
padding: 30px;
background: linear-gradient(135deg, rgba(77, 205, 172, 0.05) 0%, rgba(77, 205, 172, 0.02) 100%);
border: 1px solid rgba(77, 205, 172, 0.2);
border-radius: 20px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.implementation-step::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #4dcdac 0%, #4dcdac80 100%);
border-radius: 0 2px 2px 0;
}
.implementation-step:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(77, 205, 172, 0.2);
border-color: #4dcdac;
}
.step-number {
background: linear-gradient(135deg, #4dcdac 0%, #4dcdac80 100%);
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
flex-shrink: 0;
box-shadow: 0 4px 15px rgba(77, 205, 172, 0.3);
}
.step-content {
flex: 1;
}
.step-icon {
color: #4dcdac;
margin-bottom: 15px;
text-align: center;
}
.data-types {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
}
.data-type {
background: rgba(77, 205, 172, 0.1);
color: #4dcdac;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
border: 1px solid rgba(77, 205, 172, 0.3);
transition: all 0.3s ease;
}
.data-type:hover {
background: rgba(77, 205, 172, 0.2);
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 768px) {
.implementation-step {
flex-direction: column;
text-align: center;
gap: 20px;
}
.step-number {
width: 50px;
height: 50px;
font-size: 20px;
}
.data-types {
justify-content: center;
}
.autonomous-benefits {
flex-direction: column;
align-items: center;
}
.benefit {
width: 100%;
max-width: 300px;
text-align: center;
}
}
/* FAQ Section Styling */
.faq-container {
max-width: 1000px;
margin: 0 auto;
}
.faq-item {
background: linear-gradient(135deg, rgba(77, 205, 172, 0.05) 0%, rgba(77, 205, 172, 0.02) 100%);
border: 1px solid rgba(77, 205, 172, 0.2);
border-radius: 15px;
margin-bottom: 20px;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-item:hover {
border-color: #4dcdac;
box-shadow: 0 5px 20px rgba(77, 205, 172, 0.1);
}
.faq-question {
padding: 25px 30px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
background: linear-gradient(135deg, rgba(77, 205, 172, 0.1) 0%, rgba(77, 205, 172, 0.05) 100%);
}
.faq-question:hover {
background: linear-gradient(135deg, rgba(77, 205, 172, 0.15) 0%, rgba(77, 205, 172, 0.08) 100%);
}
.faq-question h3 {
transition: color 0.3s ease;
}
.faq-question:hover h3 {
color: #4dcdac !important;
}
.faq-icon {
color: #4dcdac;
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.faq-item.active .faq-icon {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 30px;
max-height: 0;
overflow: hidden;
transition: all 0.4s ease;
background: rgba(0, 0, 0, 0.2);
}
.faq-item.active .faq-answer {
padding: 25px 30px;
max-height: 1000px;
}
/* Responsive FAQ */
@media (max-width: 768px) {
.faq-question {
padding: 20px;
flex-direction: column;
text-align: center;
gap: 15px;
}
.faq-question h3 {
font-size: 1.1rem !important;
margin-bottom: 10px;
}
.faq-answer {
padding: 0 20px;
}
.faq-item.active .faq-answer {
padding: 20px;
}
.faq-answer div[style*="grid"] {
grid-template-columns: 1fr !important;
}
.faq-answer div[style*="flex"] {
flex-direction: column !important;
}
}
/* ============================================================
Performance Optimizations
============================================================ */
@media (max-width: 768px) {
/* Disable the costly background animation on mobile */
body::before {
animation: none !important;
background: rgba(0, 0, 0, 0.4) !important;
}
}
/* Slow down the background animation on desktop to reduce CPU load */
@keyframes moveBackground {
0% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 0%; }
}
body::before {
animation-duration: 40s;
}