* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
box-sizing: border-box;
height: 100%;
scroll-behavior: smooth;
}
body {
background: rgb(6, 46, 50) !important;
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
line-height: 28.8px;
font-family: Montserrat;
}
.navbar {
display: flex;
justify-content: center;
padding-right: 10px;
}
.menu {
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.menu-item {
position: relative;
}
a {
text-decoration: none;
display: block;
}
.new-header-logo img {
vertical-align: middle;
}
.menu-link {
color: #fff;
text-decoration: none;
padding: 5px 10px;
transition: color 0.3s, border-bottom 0.3s;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
}
.menu-link:hover {
color: #59c4ce;
}
.new-header-right-col {
display: flex;
align-items: center;
}
img {
max-width: 100%;
object-fit: cover;
height: auto;
}
.container {
padding: 0 15px;
max-width: 1230px;
margin: 0 auto;
width: 100%;
}
.main-banner-wrapper {
text-align: center;
width: 100%;
}
.main-banner {
background-repeat: no-repeat;
background-size: cover;
min-height: auto;
padding: 0px 0;
overflow: hidden;
height: 100vh;
}
.main-banner-title {
font-family: 'Montserrat';
font-weight: 800;
font-size: 41.0847px;
line-height: 50px;
font-style: normal;
text-transform: uppercase;
background: linear-gradient(91.24deg, #FFFFFF 5.92%, #FFFFFF 31.27%, rgba(255, 255, 255, 0.6) 51.28%, #FFFFFF 74.4%, #FFFFFF 94.85%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
max-width: 606px;
background-clip: text;
text-fill-color: transparent;
margin: 0 auto;
padding: 30px 0;
}
.index-template .new-header {
width: 100%;
transform: translateY(-100%);
transition: .5s;
}
header.new-header {
transform: none;
padding: 10px;
width: 100%;
position: fixed;
z-index: 1111;
}
.new-header.new-header-sticky {
padding: 10px;
transform: translateY(0);
position: fixed;
z-index: 11;
/* background: linear-gradient(180deg, #000000 0%, #062E32 100%); */
}
.new-header-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.new-header-btn a {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 6px 24px;
background: transparent;
border: 1px solid #59C4CE;
border-radius: 4px;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 16px;
text-transform: uppercase;
color: #59C4CE;
text-decoration: none;
transition: all 0.3s ease;
}
.new-header-btn a:hover {
background-color: rgba(89, 196, 206, 0.1);
box-shadow: 0 0 8px #59C4CE;
}
body.index-template {
background: #062E32 !important;
}
.last-ani-sec {
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.main-banner-title.hidden {
opacity: 0 !important;
}
.main-banner-title.hidden.show {
opacity: 1 !important;
}
@media(max-width: 767px){
.main-banner-title {
font-size: 32px;
line-height: normal;
}
}
.main-banner {
background-image: url('../images/banner-img-1.png');
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
position: relative;
}
.main-diamond-image.image-1-ani img {
width: 100%;
}
.main-banner-bottom-anim-img {
width: 100%;
position: absolute;
bottom: -100%;
z-index: 8;
display: flex;
}
.main-banner-bottom-anim-img img {
width: 100%;
}
.main-diamond-image.image-2-ani img {
width: 100%;
}
.main-diamond-image.image-2-ani img {
width: 100%;
}
.main-banner-image-wrapper {
/* position: relative;
width: 100%; */
width: 100%;
top: 0;
z-index: 2;
position: absolute;
}
.main-diamond-image {
/* position: absolute; */
width: 100%;
}
.main-diamond-image img {
opacity: 1;
transition: opacity 0.5s ease-in, transform 0.5s ease-in;
}
.main-diamond-img-bottom,
.main-banner-title {
opacity: 0;
}
.main-diamond-image.image-9-ani img {
width: auto;
}
.main-banner-bottom-anim-img.show {
bottom: 0;
transition: .5s;
}
.main-banner-title {
animation: fadeIn 0.5s ease-in 5.5s forwards;
}
.main-diamond-image.image-1-ani img {
width: 100%;
}
.main-diamond-image.image-2-ani img {
width: 100%;
}
.main-diamond-image.image-2-ani img {
width: 100%;
}
.main-banner-image-wrapper {
position: relative;
width: 100%;
}
.main-diamond-image.image-9-ani img {
width: auto;
}
.main-diamond-image.image-9-ani.show {
/* transform: scale(1); */
transform: translateY(0%);
z-index: 11;
position: relative;
}
.main-diamond-image.image-9-ani {
transition: .5s;
}
.main-diamond-image.image-10-ani.show {
transform: none;
}
.map-main img {
width: auto;
}
.map-main {
width: 100%;
}
.mani-sec-logos img {
width: 100%;
}
@keyframes image1Up {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.main-banner-title,
.main-diamond-img-bottom {
opacity: 0;
/* transform: translateY(50px); */
transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Show individual images one by one */
.main-diamond-image.show {
opacity: 1;
transform: translateY(0);
}
.main-banner-title{
margin-bottom: 100px;
}
/* Show the text */
.main-banner-title.show, .main-diamond-img-bottom.show {
opacity: 1;
/* transform: translateY(50%); */
position: relative;
z-index: 10;
display: block !important;
}
/* Hide images */
.main-diamond-image.hide {
opacity: 0;
display: none;
}
.main-diamond-image.image-1-ani {
transform: translateY(0px);
}
.main-banner-img-wrapes.zoom-out.show .main-diamond-images.image-main-ani {
transform: scale(1);
}
.main-banner-img-wrapes,
.main-banner-img-wrapes.hide {
opacity: 0;
}
.main-banner-img-wrapes.show {
opacity: 1;
}
/* Optional fade-out animation for hiding */
@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-50px);
}
}
@keyframes lastUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(-20px);
}
}
/* Animation for image 9 - Bottom to Top */
@keyframes image9Up {
0% {
opacity: 0;
transform: scale(3) translate(100px, 0);
/* transform: translateY(100px); */
}
50% {
opacity: 1;
transform: scale(1.5) translate(100px, 0);
/* transform: translateY(100px); */
}
100% {
opacity: 1;
transform: scale(1) translate(0px, 0px);
}
}
/* Animation for image 10 - Scale Zoom */
@keyframes image10Zoom {
from {
transform: scale(10) translateY(50%);
opacity: 0;
}
}
/* Apply the animations */
.main-diamond-image.image-9-ani img {
animation: 1s ease-in-out forwards;
}
.main-diamond-image.image-10-ani.show img {
animation: image10Zoom 1s ease-in-out forwards;
/* position: absolute;
top: 50%;
left: 40%; */
transform-origin: center center;
}
/* Default hidden state */
.main-banner-img-wrapes,
.main-diamond-img-bottom {
transform: scale(1.5);
transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}
.main-diamond-images.image-main-ani {
transform: scale(1);
}
/* Zoom-out effect */
.zoom-out {
transform: scale(1); /* Zoom out to 50% of the original size */
animation: image11Zoom 1s ease-in-out forwards;
}
.main-diamond-image.image-10-ani.show {
transform: none;
transform: translateY(-101%);
z-index: 9;
position: relative;
}
.main-banner-bottom-anim-img.show::after {
content: '';
position: absolute;
width: 100%;
height: 46%;
left: 0px;
top: auto;
z-index: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 58.75%, #000000 100%);
}
@media(max-width: 767px){
.main-banner {
padding: 0px 15px;
}
}
@media(max-width: 400px){
.main-banner-bottom-anim-img.show {
width: 218%;
}
}
@keyframes image11Zoom {
0% {
opacity: 0;
transform: scale(3.5);
}
100% {
opacity: 1;
transform: scale(1) translate(0%, -50%);
}
}
.diamond-section {
color: white;
text-align: center;
padding: 60px 0px;
background: linear-gradient(180deg, #000000 0%, #062E32 100%), #000000;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.diamond-images-main {
background-image: url(../images/Group\ 1\ \(1\).png);
background-repeat: no-repeat;
background-size: cover;
padding: 100px 0 0;
background-position: top;
}
.diamond-header .subheading {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
text-align: center;
background: linear-gradient(180deg, #59C4CE 0%, #157983 100%), #DADADA;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
margin: 0 0 10px;
}
.diamond-header .heading {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 34px;
line-height: 41px;
color: #FFFFFF;
margin: 0;
}
.diamond-images {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 981px;
margin: 0 auto;
padding-bottom: 100px;
}
.diamond-images img {
object-fit: contain;
}
.diamond-images img {
opacity: 0;
transform: translateY(20px); /* Move slightly down */
transition: opacity 0.6s ease, transform 0.6s ease;
}
.diamond-images img.animate {
opacity: 1;
transform: translateY(0);
animation: diamond-shine 1s ease-in-out;
}
.diamond-images img.diamond-3.animate {
transform: translateY(0);
animation: diamond-shine-up 1s ease-in-out;
}
img.diamond-1,
img.diamond-2 {
transform: translateX(160%);
}
img.diamond-1.animate,
img.diamond-2.animate {
animation: slideRightToLeft 1s ease-out forwards; /* Apply animation */
}
img.diamond-4,
img.diamond-5 {
transform: translateX(-160%);
}
img.diamond-5.animate,
img.diamond-4.animate {
animation: slideLeftToRight 1s ease-out forwards; /* Apply animation */
}
/* Keyframes for shine effect */
@keyframes diamond-shine {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.9;
}
}
@keyframes diamond-shine-up {
0% {
transform: translateY(-220px);
}
100% {
transform: translateY(0);
}
}
@keyframes slideRightToLeft {
0% {
transform: translateX(100%); /* Start 100% to the right */
opacity: 0; /* Initially hidden */
}
50% {
opacity: 0.5; /* Initially hidden */
}
100% {
transform: translateX(0); /* Move to original position */
opacity: 1; /* Fade in */
}
}
@keyframes slideLeftToRight {
0% {
transform: translateX(-100%); /* Start 100% to the right */
opacity: 0; /* Initially hidden */
}
50% {
opacity: 0.5; /* Initially hidden */
}
100% {
transform: translateX(0); /* Move to original position */
opacity: 1; /* Fade in */
}
}
.diamond-description p {
max-width: 800px;
margin: 0 auto;
font-weight: 500;
font-size: 18px;
line-height: 22px;
color: #DADADA;
}
.mobile-diamond {
display: none;
}
@media(max-width: 767px){
.diamond-images {
flex-wrap: wrap;
}
.mobile-diamond {
display: block;
margin-bottom: 20px;
}
.diamond-header .heading {
font-size: 34px;
line-height: normal;
}
.diamond-description p {
font-size: 16px;
}
img.diamond-3.animate {
display: none;
}
.diamond-images img {
width: 56px;
}
.diamond-images-main {
background-image: url(../images/Group\ 1.png);
background-position: center;
}
.diamond-section {
height: auto;
}
}
.scroll-downs {
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
}
.mousey {
width: 3px;
padding: 10px 15px;
height: 35px;
border: 2px solid #fff;
border-radius: 25px;
opacity: 1;
box-sizing: content-box;
cursor: pointer;
}
.scroller {
width: 3px;
height: 10px;
border-radius: 25%;
background-color: #fff;
animation-name: scroll;
animation-duration: 2.2s;
display: block !important;
animation-timing-function: cubic-bezier(.15,.41,.69,.94);
animation-iteration-count: infinite;
}
@keyframes scroll {
0% { opacity: 0; }
10% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(15px); opacity: 0;}
}
.image-map-slider {
color: white;
text-align: center;
padding: 60px 0px;
background: linear-gradient(360deg, #000000 0%, #062E32 100%);
/* height: 100vh; */
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.img-map-content h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 34px;
line-height: 41px;
color: #FFFFFF;
margin: 0px 0 22px;
}
.img-map-content .subheading {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
text-align: center;
background: linear-gradient(180deg, #59C4CE 0%, #157983 100%), #DADADA;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
margin: 0 0 22px;
}
.img-map-content .description {
max-width: 924px;
margin: 0 auto 50px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
color: #DADADA;
}
.image-map-slider .slider-container {
overflow: hidden;
margin: 0 auto;
}
.image-map-slider .slick-slider {
display: flex;
gap: 20px;
}
.image-map-slider .slider-item img {
max-width: 100%;
height: auto;
margin: 0 auto;
}
@media(max-width: 767px){
.image-map-slider {
height: auto;
}
.img-map-content h2 {
font-size: 34px;
line-height: normal;
}
.img-map-content .description {
font-size: 16px;
}
}
.image-map-slider {
position: relative;
}
.slider-container {
overflow: hidden; /* Hide overflow */
}
.image-map-slider {
position: relative;
overflow-x: hidden;
}
.slider-wrapper {
display: flex;
position:relative;float:left;width:100%;overflow:hidden;
}
.slider-item {
min-width: 100%; /* Each image will take full width */
flex: 0 0 auto; /* Prevent flex from growing or shrinking */
}
section.transparency-section {
background: linear-gradient(180deg, #000000 0%, #062E32 100%);
padding: 60px 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.transparency-text-center h4 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
text-align: center;
background: linear-gradient(180deg, #59C4CE 0%, #157983 100%), #DADADA;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
margin: 0 0 22px;
}
.transparency-text-center h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 34px;
line-height: 41px;
color: #FFFFFF;
margin: 0px 0 22px;
text-align: center;
}
.transparency-text-center p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
display: flex;
align-items: center;
text-align: center;
color: #DADADA;
}
.transparency-row-form {
display: flex;
}
.certificate-box-inner {
height: 100%;
text-align: center;
padding: 40px;
border-radius: 15px;
margin-right: -25%;
background-repeat: no-repeat;
background-size: cover;
}
.transparency-content {
position: relative;
}
.transparency-text-center {
margin-bottom: 60px;
}
.pos-img-box {
position: absolute;
top: auto;
bottom: 15%;
left: -14%;
z-index: 1;
}
.transparency-row-form:after {
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0px;
right: 0;
background: linear-gradient(180deg, #05121400 0%, #07282b 98%, #08282c 100%);
content: '';
}
.certificate-date-boxes label, .certificate-number-boxes label {
display: block;
padding: 10px 0;
}
.certificate-date-boxes input,
.certificate-number-boxes input{
display: block;
margin: 0 auto;
padding: 10px;
}
.certificate-box {
height: 100%;
}
.certificates-col-left {
width: 56%;
}
.certificate-col-right {
width: 44%;
}
.certificate-col-right img {
width: 100%;
}
.transparency-row-form {
transform: translateY(115%);
transition: opacity 0.8s ease, transform 0.8s ease;
opacity: 0;
}
.transparency-content.animate .transparency-row-form {
transform: translateY(0px);
transition: opacity 0.8s ease, transform 0.8s ease;
opacity: 1;
}
img.pos-img {
transform: translateY(265%);
}
.pos-img-box.animate img.pos-img {
transform: translateY(0);
animation: moveUp 1s forwards;
}
section.transparency-section {
overflow: hidden;
}
.transparency-content {
max-width: 575px;
margin: 0 auto;
width: 100%;
}
.transparency-row-form img {
width: 100%;
}
@keyframes moveUp {
0% {
opacity: 0;
transform: translateY(165%);
}
100% {
opacity: 1;
transform: translateY(0); /* End position (original) */
}
}
@media(max-width: 1280px){
.mani-logo {
height: 100%;
}
.certificate-col-right {
display: none;
}
.certificates-col-left {
width: 100%;
}
.certificate-box-inner {
margin-right: 0;
}
}
.certificate-mobile {
display: none;
}
@media(max-width: 767px){
section.transparency-section {
height: auto;
}
.transparency-text-center h2 {
font-size: 34px;
line-height: normal;
}
.transparency-text-center p {
font-size: 16px;
}
.certificate-mobile img {
width: 100%;
}
.certificate-col-right,
.certificates-col-left {
display: none;
}
.certificate-mobile {
display: block;
width: 100%;
}
.certificate-desktop {
display: none;
}
.pos-img-box {
bottom: 8%;
left: -3%;
width: 70px;
}
}
.mani-world-section {
color: #ffffff;
text-align: center;
padding: 60px 0 0;
/* background: linear-gradient(360deg, #000000 0%, #062E32 100%); */
/* height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
justify-content: flex-end; */
}
.mani-world-subtitle {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
text-align: center;
background: linear-gradient(180deg, #59C4CE 0%, #157983 100%), #DADADA;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
margin: 0 0 22px;
}
.mani-world-title {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 34px;
line-height: 41px;
color: #FFFFFF;
margin: 0px 0 22px;
text-align: center;
}
.mani-world-logos {
padding: 35px 0;
}
p.mani-world-description {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
display: flex;
align-items: center;
text-align: center;
color: #DADADA;
}
.mani-world-section .logos {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 50px;
}
.building-image::after {
content: '';
position: absolute;
bottom: -1px;
background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
mix-blend-mode: luminosity;
transform: matrix(1, 0, 0, -1, 0, 0);
width: 100%;
height: 160px;
}
.building-image {
position: relative;
display: flex;
width: 100%;
}
.mani-world-section .logos img {
max-width: 100px;
}
.mani-world-section .building-image img {
max-width: 100%;
height: auto;
margin-top: 30px;
width: 100%;
}
.mani-world-mobile {
display: none;
}
.mani-world-section .container {
position: relative;
z-index: 1;
}
@media(min-width: 768px){
.mani-world-section .building-image {
margin-top: -25%;
}
}
@media(max-width: 767px){
.mani-world-section {
height: auto;
}
.mani-world-title {
font-size: 34px;
line-height: normal;
}
.mani-world-section .building-image img {
margin-top: -76%;
}
.mani-world-desktop {
display: none;
}
.mani-world-mobile {
display: block;
}
p.mani-world-description {
font-size: 16px;
}
.mani-world-logos img {
width: auto !important;
}
}
.mani-world-section {
position: relative;
overflow: hidden;
}
.mani-world-section .mani-world-logos img,
.mani-world-section .building-image img {
opacity: 0;
transform: translateY(100px); /* Initially place the images below the view */
transition: opacity 1s ease, transform 1s ease;
}
.mani-world-section .building-image img {
transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}
.mani-world-section .mani-world-logos img {
opacity: 0;
transform: translateY(20px);
}
.mani-world-section .mani-world-logos img.visible {
opacity: 1;
transform: translateY(0);
}
.mani-world-section .building-image img.visible {
transform: translateY(0);
opacity: 1;
}
.mani-solar-section {
color: #ffffff;
text-align: center;
padding: 60px 0 0;
background: linear-gradient(180deg, #000000 0%, #062E32 100%);
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.mani-solar-subtitle {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
text-align: center;
background: linear-gradient(180deg, #59C4CE 0%, #157983 100%), #DADADA;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
margin: 0 0 22px;
}
.mani-solar-title {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 34px;
line-height: 41px;
color: #FFFFFF;
margin: 0px 0 22px;
text-align: center;
}
.mani-solar-logos {
padding: 35px 0;
}
p.mani-solar-description {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
display: flex;
align-items: center;
text-align: center;
color: #DADADA;
}
.mani-solar-section .logos {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 50px;
}
.mani-solar-section .logos img {
max-width: 100px;
}
.mani-solar-section .building-image img {
max-width: 100%;
height: auto;
padding-top: 100px;
width: 100%;
}
@media(max-width: 767px){
.mani-solar-section {
height: auto;
}
.mani-solar-title {
font-size: 34px;
line-height: normal;
}
p.mani-solar-description {
font-size: 16px;
}
}
.mani-solar-section {
position: relative;
overflow: hidden;
}
.mani-solar-section .mani-world-logos img,
.mani-solar-section .building-image img {
opacity: 0;
transform: translateY(100px); /* Initially place the images below the view */
transition: opacity 1s ease, transform 1s ease;
}
.mani-solar-section .building-image img {
transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}
.mani-solar-section .mani-world-logos img {
opacity: 0;
transform: translateY(20px);
}
.mani-solar-section .mani-world-logos img.visible {
opacity: 1;
transform: translateY(0);
}
.mani-solar-section .building-image img.visible {
transform: translateY(0);
opacity: 1;
}
.mani-strangth-section {
color: #ffffff;
text-align: center;
padding: 60px 0 0;
background: linear-gradient(180deg, #000000 0%, #062E32 100%);
height: 105vh;
display: flex;
align-items: flex-end;
}
.mani-strangth-subtitle {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
text-align: center;
background: linear-gradient(180deg, #59C4CE 0%, #157983 100%), #DADADA;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
margin: 0 0 22px;
}
.mani-strangth-title {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 34px;
line-height: 41px;
color: #FFFFFF;
margin: 0px 0 22px;
text-align: center;
}
.mani-strangth-logos {
padding: 35px 0;
}
p.mani-strangth-description {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 22px;
display: flex;
align-items: center;
text-align: center;
color: #DADADA;
}
.mani-strangth-img-top {
position: relative;
max-width: 720px;
text-align: center;
margin: 0 auto;
}
img.bottom-diamond-img {
position: absolute;
max-width: 720px;
left: 0;
bottom: 0;
width: 100%;
}
img.men-image {
position: relative;
width: 100%;
margin: 0 auto;
max-width: 551px;
text-align: center;
display: flex;
}
.mani-strangth-info-inner {
padding: 10px 40px;
background: linear-gradient(180deg, #031D20 0%, rgba(3, 29, 32, 0.5) 100%);
border: 1px solid #60DBE6;
border-radius: 9px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
width: 100%;
font-size: 18px;
line-height: 141.1%;
text-transform: capitalize;
color: #ffffff;
margin: 0 auto;
max-width: 545px;
}
span.author-name {
display: block;
}
span.author-details {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 141.1%;
text-align: center;
text-transform: capitalize;
color: #FFFFFF;
display: block;
}
.mani-strangth-img-inner {
position: relative;
max-width: 720px;
text-align: center;
margin: 0 auto;
}
.mani-strangth-box-info {
position: absolute;
bottom: 20px;
left: 50%;
right: 50%;
width: 100%;
transform: translate(-50%, 0);
}
img.men-image.animate {
opacity: 1;
transform: translateY(0%);
}
span.author-name {
display: block;
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 141.1%;
text-align: center;
text-transform: capitalize;
color: #FFFFFF;
}
span.author-details {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 141.1%;
text-align: center;
text-transform: capitalize;
color: #FFFFFF;
display: block;
}
img.men-image {
opacity: 0.5s ease-out;
transition: opacity 10s ease-in-out;
}
img.men-image.animate {
animation: fadeIn 5s ease-in-out;
}
.mani-strangth-section {
overflow: hidden;
}
.bottom-diamond-img {
transform: translateY(100%);
}
.bottom-diamond-img.animate {
transform: translateY(0%);
animation: translateYFadeIn 2s ease-out;
}
.mani-strangth-info-inner {
transform: translateY(139%);
}
.mani-strangth-info-inner.animate {
transform: translateY(0%);
animation: translateYFadeIn 1s ease-out;
}
@media(max-width: 767px){
.mani-strangth-section {
height: auto;
}
.mani-strangth-title {
font-size: 34px;
line-height: normal;
}
p.mani-strangth-description {
font-size: 16px;
}
}
@keyframes translateYFadeIn {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.mani-logos-section {
background: linear-gradient(90deg, #062E32 0%, #031719 23.5%, #031719 77.5%, #062E32 100%);
padding: 24px 0;
}
.mani-logos-bottom-box {
max-width: 646px;
margin: 0 auto;
}
.mani-sec-logos {
display: flex;
justify-content: space-between;
}
.mani-sec-logos img {
height: 70px !important;
object-fit: contain;
}
@media(max-width: 767px){
.mani-sec-logos {
justify-content: center;
flex-wrap: wrap;
}
}
.mani-footer {
background: linear-gradient(360deg, #000000 0%, #062E32 100%);
color: #fff;
text-align: center;
padding: 0 0 30px 0;
}
.mani-footer .container {
max-width: 1289px;
margin: 0 auto;
}
.mani-footer .footer-tagline h2 {
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 68px;
line-height: 100px;
text-transform: uppercase;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
opacity: 0.3;
letter-spacing: normal;
margin: 0;
padding: 20px 0 0 0;
background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
-webkit-background-size: 150px;
color: rgba(255, 255, 255, 0.3);
-webkit-background-clip: text;
-webkit-animation-name: shine;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
text-shadow: 0 0px 0px rgba(255, 255, 255, 0.5);
}
@keyframes animationgradienttitle {
0% {
background-position: 0 1600px;
}
100% {
background-position: 1600px 0;
}
}
@-webkit-keyframes shine {
0%, 10% {
background-position: -1000px;
}
20% {
background-position: top left;
}
90% {
background-position: top right;
}
100% {
background-position: 1000px;
}
}
.mani-footer .footer-logo img {
max-width: 80px;
margin: 10px auto;
}
.mani-footer .footer-logo p {
font-size: 14px;
line-height: normal;
margin: 0;
padding: 0 10px;
}
.mani-footer .footer-contact p {
margin: 5px 0;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #FFFFFF;
}
span.since-text-line {
width: 46px;
height: 0px;
border: 1px solid #FFFFFF;
display: block;
}
.since-text-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.mani-footer .footer-social a {
display: inline-block;
margin: 0 10px;
padding: 10px 0;
font-size: 20px;
color: #ffffff;
transition: color 0.3s;
}
footer ul.footer-social-icons li {
list-style: none;
}
footer ul.footer-social-icons li:not(:first-child) {
margin-left: 30px;
}
footer ul.footer-social-icons{
display: flex;
flex-wrap: wrap;
}
.mani-footer .footer-social a:hover {
color: #fff;
}
.mani-footer .footer-copyright p {
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #FFFFFF;
margin: 0;
}
.footer-social ul.dt-sc-social-icons.dt-sc-list-inline.footer-social-icons {
justify-content: center;
}
.footer-contact {
display: flex;
justify-content: center;
gap: 20px;
align-items: center;
}
.footer-contact .contact-item {
display: flex;
align-items: center;
gap: 10px;
}
.footer-logo {
margin-bottom: 40px;
}
.footer-contact .icon {
display: inline-block;
width: 20px;
height: 20px;
}
.footer-contact .phone-icon {
background: url('https://cdn.shopify.com/s/files/1/0736/7930/6975/files/Frame_1.png?v=1735888635') no-repeat center;
background-size: contain;
}
.footer-contact .location-icon {
background: url('https://cdn.shopify.com/s/files/1/0736/7930/6975/files/Vector_2.png?v=1735888635') no-repeat center;
background-size: contain;
}
.footer-contact .email-icon {
background: url('https://cdn.shopify.com/s/files/1/0736/7930/6975/files/Frame_2.png?v=1735888635') no-repeat center;
background-size: contain;
}
@media(max-width: 767px){
.mani-footer .footer-tagline h2 {
font-size: 34px;
line-height: 60px;
}
.footer-contact {
flex-wrap: wrap;
}
.footer-tagline .marquee {
display: inline-block; /* Ensure smooth scrolling */
white-space: nowrap;
animation: marquee 20s linear infinite; /* Marquee animation */
}
.footer-tagline {
overflow: hidden; /* Hide overflow for the marquee effect */
white-space: nowrap; /* Prevent text from wrapping */
width: 100%; /* Ensure the marquee spans the container */
}
@keyframes marquee {
0% {
transform: translateX(100%); /* Start off-screen */
}
100% {
transform: translateX(-100%); /* End off-screen */
}
}
}
.hamburger {
cursor: pointer;
padding: 10px;
}
.sidebar {
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100%;
background-color: #062E32 !important;
color: #ffffff;
transition: left 0.3s ease;
padding-top: 60px;
z-index: 999;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar ul li a {
display: block;
padding: 10px 0px;
color: #ffffff;
text-decoration: none;
text-align: justify;
}
.sidebar.active {
left: 0;
}
.close-btn {
position: absolute;
top: 10px;
right: 15px;
cursor: pointer;
}
.close-btn svg {
width: 24px;
height: 24px;
}
.hamburger {
display: none;
}
.sidebar-col-box .new-header-btn {
display: block;
}
.sidebar-col-box {
padding: 0 20px;
}
.sidebar-col-box .new-header-btn {
display: block;
padding-top: 15px;
}
img.mobile-image {
display: none;
}
.image-map-slder-row {
width: 100%;
}
@media(max-width: 991px){
.menu-link {
font-size: 14px;
}
nav.navbar {
display: none;
}
.new-header-btn {
display: none;
}
.hamburger {
display: block;
}
}
@media(max-width: 767px){
img.mobile-image {
display: block;
}
img.desktop-image {
display: none;
}
.main-banner-bottom-anim-img.show img.mobile-image {
width: 100%;
display: block;
height: 280px;
object-fit: cover;
object-position: top;
}
.main-banner-image-wrapper {
z-index: 1111;
}
.last-ani-sec {
padding: 20px 0;
}
}
::-webkit-scrollbar {
display: none;
}
.main-diamond-image.image-1-ani img {
width: 100%;
height: 100%;
}
.main-diamond-image.image-2-ani img {
width: 100%;
height: 100%;
}
.image-1-ani.main-diamond-image,
.image-2-ani.main-diamond-image {
position: absolute;
width: 100%;
height: 100%;
}
.footer-contact .contact-item {
cursor: pointer;
}