html{
scroll-behavior: smooth;
}
p {
font-size: 0.9em;
}
.sect {
}
#butterfly{
transform-origin: bottom center;
}
#bless-hand{
transform-origin: bottom center;
}
#magicaian-4-face{
display: flex;
justify-content: center;
left:14%;
/* -webkit-animation: rotatingZClockwise 5s linear infinite; */
}
#left-blue-hand img{
transform-origin: center center;
/* -webkit-animation: rotatingZClockwise 5s linear infinite; */
}
#right-blue-hand img{
transform-origin: center center;
/* -webkit-animation: rotatingZAntiClockwise 5s linear infinite; */
}
#rabit {
overflow: hidden;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
margin: -35px 0 0 -35px;
width: 70px;
height: 70px;
z-index: 999;
}
.loading img { width: 100%; }
.parallax {
position: absolute;
}
.parallax-left {
animation: parallax-left 5s infinite alternate;
}
.parallax-right {
animation: parallax-right 5s infinite alternate;
}
.parallax-up {
animation: parallax-up 5s infinite alternate;
}
.parallax-down {
animation: parallax-down 5s infinite alternate;
}
#phone{
margin-top: unset;
}
.section-4-images {
min-height: 60vh;
position: relative;
z-index: 0;
}
#grey-circle-behind-TV-Left{
margin-top: unset;
bottom:unset;
top: -40%;
}
#Circle-Behind-Phone {
margin-top: unset;
bottom: 22%;
}
#grey-circle-behind-TV-right {
bottom: 29%;
}
#section-4-hand{
margin-top: unset;
bottom: -31%;
}
#section-4-red-circle-hand {
margin-top: unset;
bottom: -20%;
}
#grey-circle-with-eye-mask {
margin-top: unset;
bottom: -10%;
}
#section-4-orange-circle {
margin-top: unset;
bottom: 10%;
}
#robot-hand {
margin-top: unset;
bottom: 5%;
}
#laptop-men{
margin-top: unset;
bottom: -10%;
}
#red-circle-behind-tv-phone{
bottom: 45%;
margin-top: unset;
}
#blue-circle-above-mobile{
margin-top: unset;
top: 18%;
}
#circle-behind-vr{
margin-top: unset;
bottom: 10%;
}
#bubbles-on-TV{
margin-top: unset;
top: -40%;
}
#TV-speaker{
bottom: 52%;
}
#old-tv{
transform-origin: bottom left;
}
#phone{
transform-origin: bottom left;
}
#old-tv .mainImg{
z-index: 9;
position: relative;
}
#phone_container{
transform: rotateZ(356deg) !important;
top: 2%;
width: 100%;
left: 5%;
position: absolute !important;
z-index: 0;
height: 0px;
}
#phone_container .owl-carousel .item{
display: flex;
align-items: center;
}
#tv_container{
top: 2%;
width: 100%;
left: 5%;
position: absolute !important;
z-index: 1;
height: 0px;
}
#tv_container .owl-carousel .item{
display: flex;
align-items: center;
z-index: 0;
}
#animation-inside-tv{
position: unset;
width: 60%;
margin-top: 30%;
margin-left: 5%;
}
.pillars-box{
cursor:pointer
}
.pillars-center-box{
margin-top:-7%;
}
.section-1-1-box{
cursor: pointer;
transition: left 0.7s ease, right 0.7s ease;
font-size: 12px;
}
.section-1-1-box.active{
font-size: 16px;
z-index: 3;
left:50%;
right:50%;
margin-left:-175px;
width:350px;
padding:50px 30px;
}
.section-1-1-box.left{
width:280px;
z-index: 1;
left:0;
margin-top:-5%;
padding: 30px;
}
.section-1-1-box.right{
width:280px;
z-index: 1;
right:0;
bottom:-285px;
padding: 30px;
}
#quote path{
opacity: 0;
fill:#FBD013
}
span.headingCall{
cursor: pointer;
display: inline-block;
}
span.headingCall:not(.headingCallActive):hover{
color:#fbf4d6
}
span.headingCallActive{
/* text-shadow:0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black, 0 0 3px black; */
color:#ff9400
}
.modal-backdrop{
background-color: #fff;
}
.header_container{
z-index: 999;
}
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
display: flex;
align-items: center;
justify-content: center;
z-index: 999999;
}
#loader {
width: 100%;
height: 100%;
}
#loader circle {
stroke-width: 100;
}
#circle1 {
stroke: #3ec1ce;
fill: #3ec1ce;
}
#circle2 {
stroke: #585b5c;
fill: #585b5c;
}
#circle3 {
stroke: #ffdc00;
fill: #ffdc00;
}
#circle4 {
stroke: #ce4b3e;
fill: #ce4b3e;
}
.slide-carousel{
}
/*Our Pillars Popup*/
.our-pillars-tab p {
font-size:0.8rem;
}
.our-pillars-tab .nav-item .nav-link{
font-size: 1.2rem;
line-height: 1.2rem;
}
.our-pillars-tab h1{
font-size: 1.8rem;
line-height: 1.5rem;
margin-bottom: 2%;
}
.our-pillars-tab .tab-content .cursiveFonts{
font-size: 1.2em;
}
#section-5 .carousel-item{
width:100%;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e")
}
.carousel-control-prev{
left:-10%;
}
.carousel-control-next{
right:-10%;
}
.our-pillars-tab .nav-item .nav-link{
text-shadow: 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4;
}
.life-at-ucid-wrap .lift-at-ucid-text-box{
text-shadow: 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4, 0 0 2px #4293a4;
}
/*Our Pillars Popup*/
@media only screen and (max-width:768px) {
#mumtaz {
top: 17%;
}
#magicaian-4-face{
left:30%;
}
.section-1-1-box{
width:100% !important;
left:0 !important;
right: 0 !important;
margin: unset !important;
bottom: unset !important;
font-size: 16px !important;
display: none;
position: relative !important;
}
.section-1-1-box.active{
display: block !important;
}
.carousel-control-prev{
left:-5%;
}
.carousel-control-next{
right:-5%
}
#tv_container .owl-carousel .item{
height: unset !important;
}
#phone_container .owl-carousel .item{
height: 134px !important;
}
#section-4-phone-text{
left:0px;
}
#tv_container{
transform: rotateZ(4deg) !important;
top: -1%;
}
#my-video-wrapper{
display: flex;
width: 100% !important;
height: 100vh;
object-fit:cover;
justify-content: center;
align-items: center;
}
#my-video-wrapper img{
object-fit: cover;
height: 100%;
}
.section-1-1-circle-box{
position: relative
}
#section-7-men1 {
position: absolute;
width: 10%;
margin-top: -21.5%;
right: 1.5%;
}
.jupiter{
margin-top: 3%;
}
.saturn {
margin-top: -8%;
}
.indian-army-with-flag{
left:0%;
}
.medal{
left:19%
}
.pillars-box .arrow{
display: none;
}
.Taj-Mahal{
margin-top: -3%;
}
}
@media only screen and (max-width:425px) {
.section-4-images {
min-height: 30vh;
}
}
@-webkit-keyframes rotatingY {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes rotatingZClockwise {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}
@-webkit-keyframes rotatingZAntiClockwise {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(-360deg);
}
}
@keyframes fadeInUp {
from {
transform: translate3d(0,40px,0)
}
to {
transform: translate3d(0,0,0);
opacity: 1
}
}
@-webkit-keyframes fadeInUp {
from {
transform: translate3d(0,40px,0)
}
to {
transform: translate3d(0,0,0);
opacity: 1
}
}
@keyframes parallax-left {
0% {
transform: translateX(0);
}
50%{
transform: translateX(-20px);
}
100% {
transform: translateX(0px);
}
}
@keyframes parallax-right {
0% {
transform: translateX(0);
}
50%{
transform: translateX(20px);
}
100% {
transform: translateX(0px);
}
}
@keyframes parallax-up {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
@keyframes parallax-down {
0% {
transform: translateY(0);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
.back-to-top {
position: fixed;
bottom: -40px;
right: 40px;
display: block;
width: 50px;
height: 50px;
line-height: 50px;
background: #3ec1ce;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 50%;
opacity: 0;
-webkit-transform: scale(0.3);
-ms-transform: scale(0.3);
transform: scale(0.3);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
z-index: 9;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.back-to-top:focus {
color: #fff;
}
.back-to-top.show {
bottom: 40px;
right: 40px;
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.back-to-top.show:hover {
color: #fff;
bottom: 30px;
opacity: 1;
}
.back-to-top .arrow {
background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHN0eWxlPi5zdDB7ZmlsbDojZmZmfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxOS4xIDIxN2MyMC4yIDIwLjIgMTkuOSA1My4yLS42IDczLjdzLTUzLjUgMjAuOC03My43LjZsLTE5MC0xOTBjLTIwLjEtMjAuMi0xOS44LTUzLjIuNy03My43UzEwOSA2LjggMTI5LjEgMjdsMTkwIDE5MHoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzE5LjEgMjkwLjVjMjAuMi0yMC4yIDE5LjktNTMuMi0uNi03My43cy01My41LTIwLjgtNzMuNy0uNmwtMTkwIDE5MGMtMjAuMiAyMC4yLTE5LjkgNTMuMi42IDczLjdzNTMuNSAyMC44IDczLjcuNmwxOTAtMTkweiIvPjwvc3ZnPg==);
position: absolute; width: 12px; height: 12px; background-size: contain;
transform: rotate(-90deg);
top: 30%;
left: 40%;
}
.back-to-top .arrow:nth-child(2){
top: 42%;
}
@keyframes bounceAlpha {
0% {opacity: 1; transform: rotate(-90deg) translateX(0px) scale(1);}
25%{opacity: 0; transform: rotate(-90deg) translateX(10px) scale(0.9);}
26%{opacity: 0; transform: rotate(-90deg) translateX(-10px) scale(0.9);}
55% {opacity: 1; transform: rotate(-90deg) translateX(0px) scale(1);}
}
.back-to-top:hover .arrow{
animation-name: bounceAlpha;
animation-duration:1.4s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
.back-to-top:hover .arrow:nth-child(2){
animation-name: bounceAlpha;
animation-duration:1.4s;
animation-delay:0.2s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
@media only screen and (max-width: 575px) {
.back-to-top {
width: 40px;
height: 40px;
line-height: 40px;
}
.back-to-top.show {
bottom: 30px;
right: 30px;
}
.back-to-top.show:hover {
bottom: 10px;
}
.back-to-top .arrow {
top: 27%;
left: 37%;
}
}
@media only screen and (min-width: 1300px) {
#section-7-men1{
margin-top: -19.5%;
}
}