@font-face {
font-family: 'Denominary';
src: url('Denominary-Bold.woff2') format('woff2'),
url('Denominary-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Montserrat';
src: url('Montserrat-Thin.woff2') format('woff2'),
url('Montserrat-Thin.woff') format('woff');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('Poppins-Regular.woff2') format('woff2'),
url('Poppins-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('Poppins-SemiBold.woff2') format('woff2'),
url('Poppins-SemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
body {
margin: 0;
padding: 0;
font-family: 'Poppins';
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000;
font-family: 'Denominary';
margin: 0;
}
p {
color: #000;
margin: 0;
}
.DICCMainContainer_ {
overflow: hidden;
}
.auto-container {
width: 86%;
margin: 0 auto
}
.MainBanner_ {
background: url(../../DCIITheme/images/MainBanner.jpg);
height: 100vh;
width: 100%;
background-size: cover;
position: relative;
z-index: 9;
}
.MainBanner_:before {
background: url(../../DCIITheme/images/BannerOverlay.jpg);
content: '';
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-size: cover;
z-index: -1;
opacity: 0.8;
}
/*.MainLogo_ {
width: 65%;
margin-top: 10%;
}*/
.HeaderBar_as {
padding: 2% 0 0px 0;
}
.MainLogo_ {
width: 28vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
img.CoLocated_ {
width: 38%;
width: 30%;
margin-left: 10%;
}
.MainLogo_ img {
height: 100%;
}
.HeaderButton_ {
text-align: right;
}
.PrimaryButton_ {
background: #8576FF;
color: #fff;
padding: 10px 30px 10px 30px;
display: inline-block;
font-family: 'Montserrat';
font-weight: 700;
font-size: 1vw;
transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
text-decoration: none !important;
-ms-transition: all 0.3s ease-in-out 0s;
}
.PrimaryButton_:hover {
color: #8576FF;
background: #fff;
}
.YelloButton_ {
background: rgb(255, 204, 0);
color: #000;
padding: 9px 29px 9px 29px;
border: 1px solid rgb(255, 204, 0);
}
.YelloButton_:hover {
color: rgb(255, 204, 0);
background: #000;
}
.HeaderContent {
text-align: center;
margin-top: 7%;
}
.HeaderContent h1 {
text-transform: uppercase;
color: #fff;
font-size: 7vw;
line-height: 6.4vw;
}
.HeaderContent h2 {
color: #fff;
font-size: 3.05vw;
margin-top: 1.6%;
}
.ScrollElement_as img {
width: 100%;
}
.ScrollElement_as {
position: absolute;
bottom: 0;
width: 100%;
}
.ScrollElement_as span {
color: #fff;
position: absolute;
top: 14%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.3vw;
letter-spacing: 11px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
section.DataCenterWrapper_as {
position: relative;
z-index: 2;
}
.DataCenterInnerBox_ {
text-align: center;
}
.DataCenterInnerBox_ p {
font-size: 1.6vw;
font-weight: 600;
margin-bottom: -1.2%;
}
.DataCenterInnerBox_ h3 {
font-size: 7.2vw;
font-weight: 800;
text-transform: uppercase;
background: -webkit-gradient(linear, left top, right top, from(#000000), color-stop(62%, #000000), color-stop(80%, #5a5cff), to(#8a7dff));
background: -o-linear-gradient(left, #000000 0%, #000000 62%, #5a5cff 80%, #8a7dff 100%);
background: linear-gradient(90deg, #000000 0%, #000000 62%, #5a5cff 80%, #8a7dff 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.DataCenterInnerBox_ span {
color: #000;
font-size: 1.15vw;
margin-top: -1.5%;
display: inline-block;
}
.MainHeading_ {
text-align: center;
margin-bottom: 40px;
}
.MainHeading_ h3 {
font-size: 4.6vw;
text-transform: uppercase;
line-height: 4vw;
}
.SmallHeading_ h3 {
font-size: 3.6vw;
line-height: 3vw;
}
.YellowHeading_ h3 {
color: #FFB600;
}
.DataBox_as {
text-align: center;
background-size: cover !important;
height: 12vw;
border-radius: 2.4vw;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 2.2vw;
padding-top: 1.4vw;
position: relative;
background-size: cover !important;
background-position: center;
z-index: 1;
-webkit-border-radius: 2.4vw;
-moz-border-radius: 2.4vw;
-ms-border-radius: 2.4vw;
-o-border-radius: 2.4vw;
}
.DataBox_as h3 {
display: block;
color: #fff;
font-size: 3.2vw;
line-height: 3vw;
text-transform: uppercase;
letter-spacing: 2px;
}
.DataBox_as p {
color: #fff;
font-size: .8vw;
}
.DataBox_as::before {
content: "";
position: absolute;
top: -20%;
left: -20%;
width: 140%;
height: 140%;
z-index: -1;
background: url(../../DCIITheme/images/Bg_1.jpg);
background-size: cover;
background-position: center;
animation: waterWave 6s ease-in-out infinite alternate;
-webkit-animation: waterWave 6s ease-in-out infinite alternate;
}
.DataBoxBgTwo::before {
background: url(../../DCIITheme/images/Bg_2.jpg);
background-size: cover;
}
.DataBoxBgThree::before {
background: url(../../DCIITheme/images/Bg_3.jpg);
background-size: cover;
}
@-webkit-keyframes waterWave {
0% {
transform: translate(0px, 0px) scale(1.05);
-webkit-transform: translate(0px, 0px) scale(1.05);
-moz-transform: translate(0px, 0px) scale(1.05);
-ms-transform: translate(0px, 0px) scale(1.05);
-o-transform: translate(0px, 0px) scale(1.05);
}
25% {
transform: translate(-10px, 8px) scale(1.07);
-webkit-transform: translate(-10px, 8px) scale(1.07);
-moz-transform: translate(-10px, 8px) scale(1.07);
-ms-transform: translate(-10px, 8px) scale(1.07);
-o-transform: translate(-10px, 8px) scale(1.07);
}
50% {
transform: translate(10px, -8px) scale(1.05);
-webkit-transform: translate(10px, -8px) scale(1.05);
-moz-transform: translate(10px, -8px) scale(1.05);
-ms-transform: translate(10px, -8px) scale(1.05);
-o-transform: translate(10px, -8px) scale(1.05);
}
75% {
transform: translate(-6px, 6px) scale(1.06);
-webkit-transform: translate(-6px, 6px) scale(1.06);
-moz-transform: translate(-6px, 6px) scale(1.06);
-ms-transform: translate(-6px, 6px) scale(1.06);
-o-transform: translate(-6px, 6px) scale(1.06);
}
100% {
transform: translate(6px, -6px) scale(1.05);
-webkit-transform: translate(6px, -6px) scale(1.05);
-moz-transform: translate(6px, -6px) scale(1.05);
-ms-transform: translate(6px, -6px) scale(1.05);
-o-transform: translate(6px, -6px) scale(1.05);
}
}
@keyframes waterWave {
0% {
transform: translate(0px, 0px) scale(1.05);
-webkit-transform: translate(0px, 0px) scale(1.05);
-moz-transform: translate(0px, 0px) scale(1.05);
-ms-transform: translate(0px, 0px) scale(1.05);
-o-transform: translate(0px, 0px) scale(1.05);
}
25% {
transform: translate(-10px, 8px) scale(1.07);
-webkit-transform: translate(-10px, 8px) scale(1.07);
-moz-transform: translate(-10px, 8px) scale(1.07);
-ms-transform: translate(-10px, 8px) scale(1.07);
-o-transform: translate(-10px, 8px) scale(1.07);
}
50% {
transform: translate(10px, -8px) scale(1.05);
-webkit-transform: translate(10px, -8px) scale(1.05);
-moz-transform: translate(10px, -8px) scale(1.05);
-ms-transform: translate(10px, -8px) scale(1.05);
-o-transform: translate(10px, -8px) scale(1.05);
}
75% {
transform: translate(-6px, 6px) scale(1.06);
-webkit-transform: translate(-6px, 6px) scale(1.06);
-moz-transform: translate(-6px, 6px) scale(1.06);
-ms-transform: translate(-6px, 6px) scale(1.06);
-o-transform: translate(-6px, 6px) scale(1.06);
}
100% {
transform: translate(6px, -6px) scale(1.05);
-webkit-transform: translate(6px, -6px) scale(1.05);
-moz-transform: translate(6px, -6px) scale(1.05);
-ms-transform: translate(6px, -6px) scale(1.05);
-o-transform: translate(6px, -6px) scale(1.05);
}
}
.CircleMainBox_as {
position: relative;
z-index: 1;
padding: 3% 0 5% 0;
}
.CircleMainBox_as:before {
position: absolute;
content: '';
left: 0;
top: -36%;
width: 100%;
background: url(../../DCIITheme/images/CircleBanner_.jpg);
background-size: cover;
z-index: -1;
bottom: 0;
}
.EcoSystemImg_ {
border-radius: 34px;
overflow: hidden;
border: 10px solid #8576ff59;
position: relative;
-webkit-border-radius: 34px;
-moz-border-radius: 34px;
-ms-border-radius: 34px;
-o-border-radius: 34px;
}
/*.EcoText_as {
text-align: center;
margin: 8px 0 0 0;
}*/
.EcoText_as {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
background: #fff;
background: -webkit-gradient(linear, left bottom, left top, color-stop(15%, rgba(255, 255, 255, 1)), color-stop(39%, rgba(255, 255, 255, 1)), color-stop(62%, rgba(255, 255, 255, 1)), color-stop(85%, rgb(255 255 255 / 45%)), to(rgba(255, 255, 255, 0)));
background: -o-linear-gradient(bottom, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 39%, rgba(255, 255, 255, 1) 62%, rgb(255 255 255 / 45%) 85%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 39%, rgba(255, 255, 255, 1) 62%, rgb(255 255 255 / 45%) 85%, rgba(255, 255, 255, 0) 100%);
padding: 6% 0 3% 0;
}
.EcoText_as p {
font-size: 1.2vw;
font-weight: 600;
}
.GradientHeading_as h3 {
text-transform: uppercase;
background: -webkit-gradient(linear, left top, right top, from(#000000), color-stop(62%, #000000), color-stop(80%, #5a5cff), to(#8a7dff));
background: -o-linear-gradient(left, #000000 0%, #000000 62%, #5a5cff 80%, #8a7dff 100%);
background: linear-gradient(90deg, #000000 0%, #000000 62%, #5a5cff 80%, #8a7dff 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.GradientHeadingWhite_as h3 {
background: -o-linear-gradient(323deg, #ffffff 38%, #5a5cff 63%, #5a5cff 80%, #8a7dff 100%);
background: linear-gradient(127deg, #ffffff 38%, #5a5cff 63%, #5a5cff 80%, #8a7dff 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.AnManyMore_ {
color: #8576FF;
}
.StrategicWrapper {
padding: 2.6% 0 2.6% 0;
}
.StrategicImgCnt_ {
position: relative;
border-radius: 50px;
border-right: 0;
padding: 20px;
padding-bottom: 40px;
height: 100%;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
}
.StrategicImgCnt_::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50px;
padding: 2px;
background: -o-linear-gradient(307deg, #8576FF 0%, #8576FF 25%, #6366f147 45%, #22d3ee00 70%, #00d4ff00 85%, transparent 100%);
background: linear-gradient(143deg, #8576FF 0%, #8576FF 25%, #6366f147 45%, #22d3ee00 70%, #00d4ff00 85%, transparent 100%);
mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
}
.StrImgBox_ {
position: relative;
}
.StrImgBox_:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, left bottom, left top, color-stop(29%, rgb(255 255 255 / 83%)), color-stop(63%, rgb(254 254 254 / 0%)), to(rgba(255, 255, 255, 0)));
background: -o-linear-gradient(bottom, rgb(255 255 255 / 83%) 29%, rgb(254 254 254 / 0%) 63%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(0deg, rgb(255 255 255 / 83%) 29%, rgb(254 254 254 / 0%) 63%, rgba(255, 255, 255, 0) 100%);
}
.StrategicImgCnt_ img {
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
.StrContent_as p {
font-size: 1.34vw;
font-weight: 600;
margin: 18px 0 0px 0;
}
.LearnMoreButton {
color: #000;
background: #FFB600;
border: 1px solid #FFB600;
padding: 9px 19px 9px 19px;
display: inline-block;
border-radius: 40px;
font-size: 1vw;
position: absolute;
right: 6%;
bottom: -5%;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
text-decoration: none !important;
-ms-transition: all 0.3s ease-in-out;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
}
.LearnMoreButton:hover {
color: #FFB600;
background: #fff;
}
.InsideEcosystem_ {
padding: 3.4% 0 3% 0;
}
.InsideEcoImg_ {
position: relative;
}
.InsideEcosystem_Inner_as {
margin-top: 5%;
}
.InsideEcoImg_.ForTopMargin_ {
margin-top: 25%;
}
.InsideEcoImg_ .InsideEcoContent_ {
position: absolute;
top: 10%;
left: 30px;
padding-right: 10%;
}
.InsideEcoContent_ p {
font-size: 2.5vw;
color: #fff;
text-transform: uppercase;
font-weight: 800;
line-height: 2.6vw;
}
.InsideEcoContent_ span {
color: #fff;
font-size: 0.9vw;
margin: 10px 0 0 0;
display: block;
}
.SourceQuality_ {
background: #171B2E;
padding-bottom: 4%;
}
.SourceQualityImg_ {
width: 100%;
}
.SourceQualityWrapper_ {
text-align: center;
}
.DottedBorder_ {
position: relative;
display: inline-block;
margin: 0 auto;
padding: 0% 4% 0% 4%;
margin-bottom: 2%;
}
.DottedBorder_::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 80px;
border: 2px dashed rgba(255, 255, 255, 0.25);
pointer-events: none;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
-ms-border-radius: 80px;
-o-border-radius: 80px;
}
.DottedBorder_ h3 {
display: inline-block;
color: #8576FF;
font-size: 5vw;
font-weight: 800;
margin-right: 22px;
}
.DottedBorder_ h4 {
display: inline-block;
text-align: left;
font-size: 2.4vw;
margin-top: -10px;
color: #fff;
}
.DottedBorder_ h4 color {
font-family: 'Poppins';
font-size: 1.2vw;
margin-top: -4%;
display: block;
}
.ForFlex_as {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.SourceQualityInnerContent .MainHeading_ {
text-align: left;
}
.roleCircle {
width: 12vw;
height: 12vw;
margin: auto;
border-radius: 50%;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 3.2vw;
letter-spacing: 1px;
text-align: center;
-webkit-box-shadow: 0 0 25px rgba(120, 110, 255, 0.5);
box-shadow: 0 0 25px rgba(120, 110, 255, 0.5);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.roleCircle::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
padding: 10px;
background: conic-gradient(from -10deg, #8576ff var(--progress), transparent var(--progress));
-webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
mask: radial-gradient(circle, transparent 60%, #000 61%);
animation: fillRing 2s ease forwards;
-webkit-animation: fillRing 2s ease forwards;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.roleCircle::after {
content: "";
position: absolute;
border-radius: 50%;
background: -o-radial-gradient(circle, #10142c, #0b0f25);
background: radial-gradient(circle, #10142c, #0b0f25);
z-index: 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.roleCircle span {
position: relative;
z-index: 2;
font-family: 'Denominary';
}
.roleCircle.smallText {
font-size: 1.34vw;
line-height: 1.3;
}
@-webkit-keyframes fillRing {
from {
--progress: 0%;
}
to {
--progress: 100%;
}
}
@keyframes fillRing {
from {
--progress: 0%;
}
to {
--progress: 100%;
}
}
@property --progress {
syntax: '