/*
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 5.2.1.1780123944
Updated: 2026-05-30 06:52:24

*/

.ap_hero_sec{
    position: relative;
    width: 100%;
    min-height: 70vh;
    overflow: hidden;
    background-image:
        radial-gradient(rgba(0, 212, 255, 0.18) 1px, transparent 1px);
    background-size: 26px 26px;
}
/* Glow Effect */
.ap_hero_sec::before{
    content: "";
    position: absolute;
    width: 700px;
    height: 700px;
    top: 60%;
    left: 60%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle,
        rgba(0,191,255,0.12),
        transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}
/* Background Animation */

.glowing{
    position: absolute;
    min-width: 700px;
    height: 550px;
    margin: -150px;
    transform-origin: right;
    animation: colorChange 12s linear infinite;
}

.glowing:nth-child(even){
    transform-origin: left;
}

/* Main Rotate Animation */

@keyframes colorChange{

    0%{
        filter: hue-rotate(0deg);
        transform: rotate(0deg);
    }

    100%{
        filter: hue-rotate(360deg);
        transform: rotate(360deg);
    }
}

/* Circle Position */

.glowing span{
    position: absolute;
    top: calc(80px * var(--i));
    left: calc(80px * var(--i));
    bottom: calc(80px * var(--i));
    right: calc(80px * var(--i));
}

/* Glow Dot */

.glowing span::before{
    content: "";
    position: absolute;
    top: 50%;
    left: -8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

/* Neon Green */

.glowing span:nth-child(3n + 1)::before{
    background: #86ff00;
    box-shadow:
    0 0 10px #86ff00,
    0 0 20px #86ff00,
    0 0 40px #86ff00;
}

/* Neon Yellow */

.glowing span:nth-child(3n + 2)::before{
    background: #ffd600;
    box-shadow:
    0 0 10px #ffd600,
    0 0 20px #ffd600,
    0 0 40px #ffd600;
}

/*  Neon Blue */

.glowing span:nth-child(3n + 3)::before{
    background: #00e2ff;

    box-shadow:
    0 0 10px #00e2ff,
    0 0 20px #00e2ff,
    0 0 40px #00e2ff;
}

/* Circle Rotation */

.glowing span:nth-child(3n + 1){
    animation: animate 14s alternate infinite;
}

.glowing span:nth-child(3n + 2){
    animation: animate-reverse 10s alternate infinite;
}

.glowing span:nth-child(3n + 3){
    animation: animate 18s alternate infinite;
}

/* Rotate Animation */

@keyframes animate{

    0%{
        transform: rotate(180deg);
    }

    50%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(360deg);
    }
}

@keyframes animate-reverse{

    0%{
        transform: rotate(360deg);
    }

    50%{
        transform: rotate(180deg);
    }

    100%{
        transform: rotate(0deg);
    }
}

/*  Responsive */

@media(max-width: 768px){

    .glowing{
        min-width: 350px;
        height: 350px;
    }

    .glowing span{
        top: calc(40px * var(--i));
        left: calc(40px * var(--i));
        bottom: calc(40px * var(--i));
        right: calc(40px * var(--i));
    }

}
header{
   border-bottom:1px solid hsl(204 19% 26%);
}

.main-container {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  height: 525px;
  overflow: hidden;
}
.main {
  margin: 0px auto;
  width: 450px;
  height: 450px;
  position: relative;
}
.main::before{
  content:'';
  position:absolute;

  width:650px;
  height:650px;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);

  background:radial-gradient(
    circle,
    rgba(0,230,255,0.12) 0%,
    rgba(0,230,255,0.04) 35%,
    transparent 70%
  );

  z-index:-1;
}
.big-circle {
  height: 100%;
  width: 100%;
  position: relative;
  border:2px solid rgba(0,230,255,0.45);
  border-radius: 50%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  animation: Rotate 20s linear infinite;
  -webkit-animation: Rotate 20s linear infinite;
}

.icon-block {
  width: 64px;
  height: 64px;
  position: absolute;
  border-radius: 50%;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  border:1px solid rgba(0,230,255,0.45);
  box-shadow:
  0 0 15px rgba(0,230,255,0.25),
  0 0 30px rgba(0,230,255,0.08);
  transition:all 0.4s ease;
background:#e8e8e8;
}
.icon-block img {
  padding:8px !important;
  margin: 0px auto;
  width: 86%;
  animation: Rotate-reverse 20s linear infinite;
  -webkit-animation: Rotate-reverse 20s linear infinite;
}
.icon-block:first-child {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.icon-block:nth-child(2) {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  -webkit-transform: translate(50%, -50%);
}
.icon-block:nth-child(3) {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  -webkit-transform: translate(-50%, 50%);
}
.icon-block:hover{
  box-shadow:
  0 0 20px #00e6ff,
  0 0 45px rgba(0,230,255,0.35);

  border-color:#00e6ff;
}
.icon-block:nth-child(4) {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

/* circle content */
.circle {
  animation: circle-rotate 20s linear infinite;
  -webkit-animation: circle-rotate 20s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  width: 75%;
  height: 75%;
  border:2px dashed rgba(0,230,255,0.28);
  border-radius: 50%;
}
.circle .icon-block img {
  animation: img-rotate 20s linear infinite;
  -webkit-animation: img-rotate 20s linear infinite;
}
/* center logo */
.center-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.center-logo img {
  max-width: 200px;
}

/* keyframe animation */

@keyframes Rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes Rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes Rotate-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes Rotate-reverse {
  from {
    -webkit-transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
  }
}

@keyframes circle-rotate {
  from {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(405deg);
  }
}

@-webkit-keyframes circle-rotate {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(405deg);
  }
}

@keyframes img-rotate {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(-405deg);
  }
}

@-webkit-keyframes img-rotate {
  from {
    -webkit-transform: rotate(-45deg);
  }
  to {
    -webkit-transform: rotate(-405deg);
  }
}
.section-title{
    position:relative;
    margin-bottom:30px;
}

.section-title h2{
    position:relative;
    z-index:2;
    font-weight:700;
    margin:0;
}

.section-title span{
    position:absolute;
    top:-10px;
    left:0;
    font-size:80px !important;
    font-weight:800;
    color:rgb(255 255 255 / 4%);
    line-height:1;
    z-index:1;
    text-transform:capitalize;
    pointer-events:none;
}