*{
    box-sizing: border-box;
}


body, a, p, h1, h2, h3, h4, h5, h6{
   font-family: "Open Sans", sans-serif!important;
   border-right: none!important;
}


:root {
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    --accent-blue: #76a9fa;
    --accent-blue-dark: #4f83f7;
    --accent-glow: rgba(118, 169, 250, 0.3);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-tertiary: rgba(255, 255, 255, 0.6);
}

/*  background: linear-gradient(135deg, #0a0a0f 0%, #151520 25%, #1a1a2e 50%, #16213e 75%, #0f3460 100%);
     background: linear-gradient(135deg, rgba(48, 48, 193, 0.95) 100%);
*/

p a {
	color: #FFF;
}


/* Animated background elements */
.hero-bg-animation {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
}

.floating-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 1;
    animation: float 25s infinite ease-in-out;
}

.shape-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(118, 169, 250, 0.3) 0%, transparent 70%);
    top: -200px;
    left: -200px;
    animation-delay: 0s;
}

.shape-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(79, 131, 247, 0.3) 0%, transparent 70%);
    top: 50%;
    right: -150px;
    animation-delay: 7s;
}

.shape-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(118, 169, 250, 0.3) 0%, transparent 70%);
    bottom: -100px;
    left: 20%;
    animation-delay: 14s;
}

/* Geometric shapes */
.geo-shape {
    position: absolute;
    opacity: 0.1;
    animation: rotate-float 30s infinite linear;
}

.geo-1 {
    width: 300px;
    height: 300px;
    top: 20%;
    right: 10%;
    background: linear-gradient(45deg, var(--accent-blue) 0%, transparent 100%); 
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.geo-2 {
    width: 250px;
    height: 250px;
    bottom: 20%;
    left: 5%;
    background: linear-gradient(135deg, var(--accent-blue-dark) 0%, transparent 100%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation-delay: -10s;
}


.geo-3 {
    width: 250px;
    height: 250px;
    top: 15%;
    left: 5%;
    background: linear-gradient(135deg, var(--accent-blue-dark) 0%, transparent 100%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation-delay: -6s;
}


.geo-4 {
    width: 250px;
    height: 250px;
    top: 3%;
    left: 27%;
    background: linear-gradient(135deg, var(--accent-blue-dark) 0%, transparent 100%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation-delay: -8s;
}


.geo-5 {
    width: 250px;
    height: 250px;
    bottom: 3%;
    left:27%;
    background: linear-gradient(135deg, var(--accent-blue-dark) 0%, transparent 100%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation-delay: -10s;
}


.geo-6 {
    width: 250px;
    height: 250px;
    top: 40%;
    left: 35%;
    background: linear-gradient(135deg, var(--accent-blue-dark) 0%, transparent 100%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation-delay: -13s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    25% {
        transform: translate(100px, -80px) scale(1.1) rotate(90deg);
    }
    50% {
        transform: translate(-60px, 60px) scale(0.9) rotate(180deg);
    }
    75% {
        transform: translate(80px, 100px) scale(1.05) rotate(270deg);
    }
}

@keyframes rotate-float {
    0% {
        transform: rotate(0deg) translateY(0);
    }
    50% {
        transform: rotate(180deg) translateY(-50px);
    }
    100% {
        transform: rotate(360deg) translateY(0);
    }
}

.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--accent-blue);
    border-radius: 50%;
    opacity: 0;
    animation: particle-rise 10s infinite ease-out;
}

@keyframes particle-rise {
    0% {
        opacity: 0;
        transform: translateY(100vh) scale(0);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) scale(1);
    }
}

/* Generate multiple particles */
.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 20%; animation-delay: 1s; }
.particle:nth-child(3) { left: 30%; animation-delay: 2s; }
.particle:nth-child(4) { left: 40%; animation-delay: 3s; }
.particle:nth-child(5) { left: 50%; animation-delay: 4s; }
.particle:nth-child(6) { left: 60%; animation-delay: 5s; }
.particle:nth-child(7) { left: 70%; animation-delay: 6s; }
.particle:nth-child(8) { left: 80%; animation-delay: 7s; }
.particle:nth-child(9) { left: 90%; animation-delay: 8s; }
.particle:nth-child(10) { left: 95%; animation-delay: 9s; }

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 25% 25%, var(--accent-glow) 0%, transparent 50%);
    animation: hero-glow 8s ease-in-out infinite;
    z-index: 1;
}

@keyframes hero-glow {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        opacity: 0.7;
    }
    50% { 
        transform: scale(1.1) rotate(2deg);
        opacity: 1;
    }
}

.first-container{
    background-image: url('../images/download-background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    position: relative;
    overflow: hidden;
}


/*  background-color: rgb(48, 48, 193);  */
.first-inner{
    z-index: 2;
    position: relative;
    color: white;
    padding-bottom: 100px;
    top: 0;
    left: 0;
    right: 0;
}

.head{
    display: none;
}

.mySidenav{
    height: 100%;
    width: 0;
    top:0;
    right: 0;
    position: fixed;
    background-color: #5f4dee;
    z-index: 2000;
    padding-top: 35px;
    transition: 0.5s;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.positionLinkRight.is-visible{
    animation: slideInRight 1.05s ease-in-out forwards;
}

.positionLinkLeft.is-visible{
    animation: slideInLeft 1.05s ease-in-out forwards;
}

.mySidenav.div{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.mySidenav a{
    text-decoration-line: none;
    border-bottom: 1px solid white;
    display:block;
    text-align: center;
    font-weight: 400;
    font-size: 30px;
    padding:8px;
    margin: 5px 0px;
    color: white;
    transition:ease-in 0.6s;
}

.mySidenav a:hover{
    color:#00d2ff;
    /* animation: tappedLink 1s ease-out forward; */
}

.div{
    border-bottom: none!important;
}
 
.closebtn{
    text-align: center;
    top: 0;
    font-size: 36px;
    border-bottom: none!important;
}

.menu-for-mobile{
    display: none;
}

.logos{
    width: 118px;
    height: 32px;
}

.head-logo-and-links{
    display: flex;
    justify-content: space-between;
    align-items:center;
    padding: 30px 70px ;
    width: 100%;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.3s ease;
    background: transparent; /*rgba(0,0,0,0.3) */
    margin-bottom: 15px;
}

#navbar.scrolled {
   /* background-color: rgba(95, 77, 238, 0.8); /* Your purple at 80% opacity */
    background: var(--glass-bg); /* Semi-transparent background */
    backdrop-filter: blur(10px); /* This creates the "frosted glass" look */
    -webkit-backdrop-filter: blur(35px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Very subtle divider */
    padding: 20px 70px;
}

.head-links{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.social-icons{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.social-icon{
    width: 30px;
    height: 30px;
    margin-right: 5px;
    background-color: #00d2ff;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.social-icon:hover{
    cursor: pointer;
    background-color: #ffffff;
    color: #00d2ff;
    transition: all 200ms ease-in-out;
}

.head-links a{
    color: white;
    font-size: 0.875rem; /* 14px */ 
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration-line: none;
    text-transform: uppercase;
    padding: 0px 12px;
}

.head-links a:hover{
    text-decoration-line: none;
}

.head-links a.active {
    background: rgba(118, 169, 250, 0.15);
    border-color: var(--accent-blue);
    box-shadow: 0 4px 15px var(--accent-glow);
    text-decoration-line: underline;
    color: #00d2ff; /*previously -> #00C9DB */
    transition: ease-out 500ms;
}

.homeLink.active{
    text-decoration-line: none!important;
}

.linksz:hover{
    color: #00d2ff;
    text-decoration-line: underline;
    transition: ease-out 500ms;
}

#face{
    border:  3px solid #00d2ff ;
    border-radius: 50%;
    background: #00d2ff;
    padding: 7px 8px;
 
}

#twitt{
    border:  3px solid #00d2ff ;
    border-radius: 50%;
    background: #00d2ff;
    padding: 7px 8px;
    margin-left: 8px;
}

#face:hover{
    background-color: white;
    color: #00d2ff;
    border:  5px solid white ;
}

#twitt:hover{
    background-color: white;
    color: #00d2ff;
    border:  3px solid white ;
}

.link-buttons a{
    color: white;
    text-decoration-line: none;
    background: #00d2ff;
    padding: 23px 40px;
    background: #00d2ff;
    border-radius: 32px;
    font-weight: 580;
    transition: 0.4s;
    
}

.link-buttons a:hover{
    color: #00d2ff;
    text-decoration-line: none;
    border: 1px solid #00d2ff;
    padding: 23px 40px;
    background: transparent;
    border-radius: 32px;
    font-weight: 580;
    cursor: pointer;
    
}

.link-buttons{
    margin-top: 50px;
}

#apple{
    margin-right: 20px;
}

.separate-color{
    color: #00d2ff;
}

.button-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-top: 50px;
}


.button-container.is-visible{
     animation: slideInLeft 1s ease-out forwards;
}


.app-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 250px;
  height: 70px;
  border: 0.1px solid #00d2ff;
  overflow: hidden;
  cursor: pointer;
  font-size: 18px;
  z-index: 0;


    
    min-width: 180px;
    height: 54px;
    padding: 12px 30px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid #00d2ff;

    color: white; /* #00d2ff */
    background: #00d2ff; /* transparent */
    /*padding: 23px 40px; */
    border-radius: 32px;
    font-weight: 580;
    transition: 0.4s;
}

.app-button:hover img{
   filter:  invert(79%) sepia(57%) saturate(4210%) hue-rotate(150deg) brightness(95%) contrast(101%);  /* filter: brightness(0) invert(1); */
}

.app-button:hover span{
    color: #00d2ff; /* color: white; */ 
}

.app-button img {
  height: 24px;
  width: auto;
         /* brightness(0) invert(1); /* Make logo white */
 filter: brightness(0) invert(1);
  z-index: 1;
}

.app-button span {
  z-index: 1;
}

.app-button .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: transparent!important; /* white:  can change to this to go back to previous animation */  
  z-index: 0;
  transition: width 0.4s ease;
}

.app-button:hover .overlay,
.app-button:active .overlay {
  width: 100%;
}

.app-button:hover ,
.app-button:active  {
  border: 2px solid #00d2ff;  
  background: transparent!important; /* can delete this to go back to previous animation*/
}



/* Scroll animations */
.fade-in {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);

}

@keyframes tappedLink {
    0%{
        border-bottom: 2px solid white;
    }
    10%{
        border-right-color: #00d2ff;
        border-bottom-right-radius: 20px;
    }
    20%{
        border-right: 2px solid #00d2ff;
    }
    30%{
        border-top-right-radius: 20px;
    }
    40%{
        border-top: 2px solid #00d2ff;
    }
    50%{
        border-left-color: #00d2ff;
        border-top-left-radius: 20px;
    }
    60%{
        border-left: 2px solid #00d2ff;
    }
    80%{
        border-bottom-left-radius: 20px;
    }
    100%{
        border-bottom: 2px solid #00d2ff;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-110px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(110px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(120px);
        transition: all 0.8s ease;
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
} 

@keyframes slideInCenterAndBounce {
  0% {
        font-size: 0px;
        opacity: 0;
        transform: translateY(10px);
    }
 80% {
    /* the overshoot; grows slightly larger than the default 50px or font size */
        font-size: 60px;
        opacity: 1;
    }
100% {
        font-size: 50px;
        opacity: 1;
        transform: translateY(0px);
    }

}

@keyframes slideInCenter {
  0% {
        font-size: 0px;
        opacity: 0;
    }
20% {
        font-size: 10px;
        opacity: 0.2;
    }
40% {
        font-size: 20px;
        opacity: 0.4;
    }
60% {
        font-size: 30px;
        opacity: 0.6;
    }
    
80% {
        font-size: 40px;
        opacity: 0.8;
    }
    
100% {
        font-size: 50px;
        opacity: 1;
    }

}

.div1 h1{
    font-size: 3.5rem; /* 56px */
    font-weight: 700;
    line-height: 4rem;
    letter-spacing: -0.5px;
    opacity: 0;
}

.div1.is-visible h1{
    animation: slideInCenter 0.8s ease-out forwards;
}

.type-wrap{
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  border-right: 3px solid #00d2ff; /* The Cursor */
  padding-right: 5px;
  animation: blink 0.8s infinite;
}

.changing-text::before {
  content: "Designers";
  color: #00d2ff;
  animation: word-switch 3s infinite;
}

/* This switches the words */
@keyframes word-switch {
  0%, 33% { content: "DESIGNERS"; }
  34%, 66% { content: "DEVELOPERS"; }
  67%, 100% { content: "MARKETERS"; }
}

/* This makes the cursor blink */
@keyframes blink {
    from, to { border-color: transparent; }
  50% { border-color: #00d2ff; }
}


.div1 p{
    font-size: 1.125rem;/* 18px */
    font-weight: 400;
    line-height: 1.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
}

.home-content-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 110px;
    padding: 0px 50px 10px 90px;
}


.div1{
   width: 50%;
}

.div2{
    width: 50%;
    margin-left: 30px;
}

.div2.is-visible{
     animation: slideInRight 1s ease-out forwards;
}



.designer{
    z-index: 7;
    position: relative;
    
    animation-name: nftss;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
              }  

@keyframes nftss  {

 from{
        opacity: 0;
}


  to {
        opacity: 1;
        visibility: none;
}


}


/*********************/
/*********************/
/* SECOND CONTAINER */
/*********************/
/*********************/

.second-inner{
   /*  background: #262431; */
    background-color: #262431;
    padding-top: 110px;
    padding-bottom: 110px;
}
      
/************************/
/*     Testimonials     */
/************************/


.slider-1 {
    /*
	padding-top: 8rem;
	padding-bottom: 8rem;
    */
	text-align: center;
}

.slider-1 .h2-heading {
	margin-bottom: 3.5rem;
}

.slider-1 .slider-container {
	position: relative;
}

.slider-1 .swiper-container {
	position: static;
	width: 88%;
	text-align: center;
}

.slider-1 .swiper-button-prev:focus,
.slider-1 .swiper-button-next:focus {
	/* even if you can't see it chrome you can see it on mobile device */
	outline: none;
}

.slider-1 .swiper-button-prev {
	left: -10px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23484a46'%2F%3E%3C%2Fsvg%3E");
	background-size: 18px 28px;
}

.slider-1 .swiper-button-next {
	right: -10px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23484a46'%2F%3E%3C%2Fsvg%3E");
	background-size: 18px 28px;
}

.slider-1 .card {
	position: relative;
	border: none;
	background-color: transparent;
}

.slider-1 .card-image {
	width: 96px;
	height: 96px;
	margin-right: auto;
	margin-bottom: 1.5rem;
	margin-left: auto;
	border-radius: 50%;
}

.slider-1 .card-body {
	padding: 0;
}

.slider-1 .testimonial-author {
	margin-bottom: 0;
	color: white;
    font-weight: 700;
    font-size: 14px;
}

.testimonial-text {
    color: white!important;
    font-size: 16px;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 1rem;
}



/*********************/
/*********************/
/* THIRD CONTAINER */
/*********************/
/*********************/


.third-container{
    width: 100%;
    background-color:#2f2c3d;      /* #0d6efd */
}
.third-inner{
    width: 100%;
    padding-top: 120px;
    padding-bottom: 150px;
}

.third-inner.is-visible{
    animation: slideInUp 1s ease-out forwards;
}

.third-inner h1{
    text-align: center;
    color: white;
    font-size: 2.25rem; /* 36px */
    font-weight: 700;
}

.third-inner p{
    text-align: center;
    color: white;
    font-size: 1rem; /* 16px */
    font-weight: 400;
    line-height: 1.6;
}

 .latch-menu{
    text-align: center;
    color: white;
   display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 40px;
    
}

.latch1{
    border-bottom: 4px solid #00d2ff;
    color: #00d2ff;
    padding-bottom: 10px;
    transition: 0.3s;
    text-align: center;

    font-weight: 700;
    padding-right: 30px;
    padding-left: 20px;
    font-size: 14px;
}

.latch2{
    border-bottom: 4px solid white;
    padding-bottom: 10px;
    transition: 0.3s;

    font-weight: 700;
    padding-right: 30px;
    padding-left: 20px;
    font-size: 14px;
}

.latch3{
    border-bottom: 4px solid white;
    padding-bottom: 10px;
    transition: 0.3s;

    font-weight: 700;
    padding-right: 20px;
    padding-left: 10px;
    font-size: 14px;
}

.latch1:hover{
    border-bottom: 4px solid #00d2ff!important;
    color: #00d2ff!important;
    cursor: pointer;
}

.latch2:hover{
    border-bottom: 4px solid #00d2ff!important;
    color: #00d2ff!important;
    cursor: pointer;
}

.latch3:hover{
    border-bottom: 4px solid #00d2ff!important;
    color: #00d2ff!important;
    cursor: pointer;
    
}

.latch1:visited{
    border-bottom: 4px solid white;
}

.ForTablets{
    display: none;
}

.configuring{
    width: 100%;
    padding-top: 50px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 20px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.configure1{
    display: flex;
    flex-direction: column;
    align-items: start;
    
}
.configure2{
   margin: 0px 20px 0px 20px;
   height: 90%;
}

.configure1a{
    display: flex;
    flex-direction: row;
    align-items: start;
    margin-bottom: 70px;
}

.configure1a.is-visible{
    animation: slideInLeft 1s ease-out forwards;
}

.configure1ai {
   color: white;
   display: flex;
   flex-direction: column;
   align-items: end;
}

.configure1ai h4{
   text-align: end;
   font-size: 18px;
   font-weight: 700;
}


.configure1ai p{
    text-align:end;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5rem; /* 24px */
    color: rgba(255, 255, 255, 0.8);
 }

 .configure1aii{
    padding-left: 20px;
 }
 
.configure3a{
    display: flex;
    flex-direction: row;
    align-items: start;
    margin-bottom: 70px; 
}

.configure3a.is-visible{
    animation: slideInLeft 1s ease-out forwards;
}

.configure3ai {
   color: white;
   display: flex;
   flex-direction: column;
   align-items: start;
}

.configure3ai h4{
   text-align: start;
   font-size: 18px;
   font-weight: 700;
}


.configure3ai p{
    text-align:start;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5rem; /* 24px */
    color: rgba(255, 255, 255, 0.8);
 }

 .configure3aii{
    padding-right: 20px;
  
 }

 #comp1, #comp2, #comp3, #comp4, #comp5, #comp6{
    color: white;
    background: #00d2ff;
    border-radius: 50%;
    transition: 0.7s;
    
    padding: 8px;
    font-size: 24px;
    height: 54px;
    width: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
 }

 #comp1:hover, #comp2:hover, #comp3:hover, #comp4:hover, #comp5:hover, #comp6:hover{
    color: #00d2ff;
    background: white;
    cursor: pointer;
 }


/* Style for tracking section */

#tracking{
    display: none;
}

.track{
    display: flex;
    clear: both;
    padding: 40px 40px 40px 70px;
}

.trackingImg{
    width:30%;
}

.trackingImg.is-visible{
    animation: slideInLeft 1s ease-out forwards;
}

.trackingHeaderText h1{
    text-align: start;
    padding-left: 60px;
    padding-bottom: 25px;
}

.trackingHeaderText.is-visible{
    animation: slideInRight 1s ease-out forwards;
}

.trackingHeaderText p{
    text-align: start;
    padding-left: 60px; 
    font-size: 20px;
}


.trackingOtherText{
   display: flex;
   padding-left: 40px;
}

.trackingOtherText1.is-visible{
    animation: slideInRight 1s ease-out forwards;
}

.trackingOtherText2.is-visible{
    animation: slideInRight 1s ease-out forwards;
}

.tracking3a{
    display: flex;
    flex-direction: row;
    align-items: center; 
    padding-top: 30px;
}


.tracking3aii{
    padding: 20px;
 }



 .tracking3ai {
    color: white;
 }
 
 .tracking3ai h4{
    text-align: start;
    font-size: 18px;
    font-weight: 700;
 }
 
 
 .tracking3ai p{
     text-align:start;
  }


  /* style for monitoring section */

  #monitoring{
    display: none;
 
    
  }

  .monitor{
    display: none;
    display: flex;
    padding: 40px 70px 0px 40px;
 
  }

  .monitoringImg{
    width: 50%;
  }

  .monitoringImg img{
    width: 100%;
    padding-left: 15px;
  }

  .monitoringFooterText h1{
    text-align: start;
    padding-left: 60px;
    padding-bottom: 5px;
    padding-top: 10px;
}

.monitoringFooterText p{
    text-align: start;
    padding-left: 60px; 
    font-size: 16px;
}



/*********************/
/*********************/
/* FOURTH CONTAINER */
/*********************/
/********************/


.fourth-container{
    width: 100%;
    margin-top: 0px;
}

.fourth-inner{
    width: 100%;
    background-image: url('../images/video-background.jpg');
    color: white;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 100px; 
    padding-top: 110px;
}


.previewText{
    width: 100%;
    text-align: center;
}

.previewText.is-visible{
     animation: slideInUp 1s ease-out forwards;
}

.previewText h1{
    font-size: 2.25rem; /* 36px */
    font-weight: 700;
}

.previewText p{
    line-height: 1.6;
    font-size: 16px;
    font-weight: 400;
    padding-bottom: 50px;
}

.previewVideo{
    width: 100%;
}

.previewVideo.is-visible{
    animation: slideInUp 1s ease-out forwards;
}

.previewinner{
    margin: 50px 100px 40px 100px;
    height: 456px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid wheat;
    border-radius: 20px;
    background-image: url('../images/video-frame.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    
}

.play{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #00d2ff;;
    padding: 30px 35px;
    background-color: transparent;
    transition: ease-in-out 0.5s;
}

.play a{
    text-align: center;
    font-size: 30px;
    background-color: transparent;
    color: white;
    width: inherit;
    text-decoration-line: none;
}

.play a:hover{
    color: white;
}

.play:hover{
    cursor: pointer;
    background-color:#00d2ff;
    border-color: transparent;
}

.play:hover a{
    color: white;
}


/*********************/
/*********************/
/* Fifth CONTAINER */
/*********************/
/********************/


.fifth-container{
    width: 100%;
}

.fifth-inner{
    padding: 100px 70px 100px 70px;
    width: 100%;
    background:  #262431;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.details{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 40px 0px;
}

.positionRight.is-visible{
    animation: slideInRight 1s ease-out forwards;
}

.positionLeft.is-visible{
    animation: slideInLeft 1s ease-out forwards;
}

.positionUp.is-visible{
    animation: slideInUp 1s ease-out forwards;
}

.detailsImg{
    width: 50%;
}


.fImg img{
   width: 80%;
   padding-left: 30px;
}

.detailsText h1{
    font-size: 1.75rem; /* 28px */
    font-weight: 700;
    line-height: 2.25rem; /* 36px */
    color: white;
}

.details p{
    padding-bottom: 35px;
    padding-top: 20px;
    font-size: 16px;
    line-height: 1.6rem; /* 26px */
    color: rgba(255, 255, 255, 0.8);
}

.detailsImg2{
    padding-left: 50px;
}

.lightboxbtn{
    width: 140px;
    height: 46px;
    font-weight: 700;
    font-size: 14px;
    line-height: 46px;
    border: 1px solid #00d2ff;
    background: #00d2ff;
    padding: 15px 30px;
    border-radius: 23px;
    transform: 0.5s;
}

.lightboxbtn:hover{
    background: transparent;
    cursor: pointer;
}

.achievements{
    width: 100%;
    display: flex; 
    justify-content: space-between;
    align-items: center;
    padding: 50px 70px;
    
}

.happy{
align-items: center;
align-content: center;
justify-content: center;
text-align: center;
   
}

.happy p{
    color: white;
    line-height: 0;
    font-size: 14px;
    margin-top: 5px;
    font-weight: 400;
}
#users{
    color: #00d2ff;
    text-align: center;
    font-size: 32px;
    margin-bottom: 15px;
}

.numba{
font-size: 40px;
font-weight: 700;
line-height: 48px;
color: white;

}



/*********************/
/*********************/
/* Sixth CONTAINER */
/*********************/
/********************/

.sixth-inner{
    width: 100%;
    background: #2f2c3d;
    padding-top: 50px ;
}

.sixth-inner h1{
    color: white;
    text-align: center;
    padding-bottom: 20px;
}

.ens{
    border-bottom:3px solid #00d2ff ;
    padding-bottom: 8px;
} 


/***********************/
/*     Screenshots     */
/***********************/
.slider-2 {
	padding-top: 7.5rem;
	padding-bottom: 8.125rem;
}

.slider-2 .h2-heading {
	text-align: center;
}

.slider-2 .hr-heading {
	display: block;
	margin-right: auto;
	margin-bottom: 3.75rem;
	margin-left: auto;
}

.slider-2 .slider-container {
	position: relative;
}

.slider-2 .swiper-container {
	position: static;
	width: 90%;
	text-align: center;
}

.slider-2 .swiper-button-prev,
.slider-2 .swiper-button-next {
	top: 50%;
	width: 1.125rem;
}

.slider-2 .swiper-button-prev:focus,
.slider-2 .swiper-button-next:focus {
	/* even if you can't see it chrome you can see it on mobile device */
	outline: none;
}

.slider-2 .swiper-button-prev {
	left: -0.5rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
	background-size: 1.125rem 1.75rem;
}

.slider-2 .swiper-button-next {
	right: -0.5rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
	background-size: 1.125rem 1.75rem;
}


/*********************/
/*********************/
/* SEVENTH CONTAINER */
/*********************/
/*********************/

.SEVENTH-CONTAINER{
    background-image: url('../images/download-background.jpg');
}

.SEVENTH-inner{
    width: inherit;
    padding: 100px 70px 110px 70px ;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; 
}

.SEVENTH-inner.is-visible{
    animation: slideInUp 1s ease-out forwards;
}

.Seventh-text h4{
    font-size: 1.75rem; /* 28px */
    font-weight: 700;
    line-height: 2.25rem; /* 36px */  
    margin-bottom: 30px;
    color: white;
    text-align: center;
}

.Seventh-image{
    width: 50% ;
    margin-top: 30px;
    margin-left: 50px;
}

.Seventh-image img{
    width: 99%;
}



/*********************/
/*********************/
/* EIGHT-CONTAINER */
/*********************/
/********************/

.EIGHT-CONTAINER{
    background: #262431;
}

.EIGHT-INNERMOST{
    width: inherit;
    background: #262431;
}

.EIGHT-INNER.is-visible{
    animation: slideInUp 1s ease-out forwards;
}

.EIGHT-INNER{
    display: flex; 
    justify-content: space-between;
    padding: 100px 90px;
    color: white;
    line-height: 30px;
    
}

.EIGHT-INNER:hover{
    cursor: pointer;
}

.about p{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5rem; /* 24px */
    color: rgba(255, 255, 255, 0.8);
}

.liinks a{
    font-size: 14px;
    font-weight: 400;
    text-decoration-line: none;
    color: rgba(255, 255, 255, 0.9);
}

.liinks a:hover{
    text-decoration-line: underline;
    transition: all 400ms ease-in-out;
    color: #00d2ff;
}

.social{
    text-align: right;
}


#faces{
    border:  5px solid #2f2c3d;
    border-radius: 75%;
    background: #2f2c3d;
    padding: 5px 8px;
    transition:0.3s;
 
}

#twitts{
    border:  3px solid #2f2c3d;
    border-radius: 50%;
    background:#2f2c3d;
    padding: 7px 8px;
    transition: 0.3s;
  
}

#faces:hover{
    background:#00d2ff;
    border:  5px solid #00d2ff;
}

#twitts:hover{
    background:#00d2ff;
    border:  3px solid #00d2ff;
}


.social-text{
    padding-top: 20px;
    text-align: right;
}

.copywright{
    text-align: center;
    width: 100%;
    padding-bottom: 31px;
}

.copywright p{
    color: white;
}

.copywright p:hover{
    cursor: pointer;
}