:root{
    --primary-color: #0055EE;
    --primary-light-color: #E1EEF9;
    --primary-color-15: #0055ee26;
}




.section-inner-head h2{ user-select: none; margin-bottom: 10px;}
.sub-heading {font-size: 20px; line-height: 28px; font-weight: 400; padding-bottom: 5px; margin-bottom: 10px; display: inline-flex; position: relative;}
.sub-heading::after {content: ''; height: 3px; width: 32px; border-radius: 2px; background-color: var(--primary); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
a:hover{color: var(--primary-color);}

/* header-main */
.header-main { position: sticky; background: var(--color-white);}

/* Banner Section */
.banner-section{padding-top: 85px; padding-bottom: 70px; overflow: hidden;}
.banner-content{max-width:1237px;margin: 0 auto;text-align: center;}
.banner-sub-title {font-weight: 500; padding: 8px 16px; border: 1px dashed var(--primary-color); display: inline-flex; margin-bottom: 30px;}
.banner-title {margin-bottom: 24px;}
.banner-sub-title, .banner-title{color: var(--primary-color);}
.banner-sub-title {font-size: var(--font-20); line-height: 28px;}
.banner-section .btn1 {border-color: var(--primary-color); background-color: var(--primary-color); color: var(--color-white); box-shadow: 0px 4px 15px 0px #1D190E1A;}
.bottom-content {max-width: 1215px; margin: 20px auto 0px; position: relative;}
.banner-moc-message {position: absolute;}
.top-left {top: 12%; left: 12%; animation: moveingX 2.5s linear infinite;}
.top-right {top: 33%; right: 50px; animation: moveingY 2s linear infinite;}
@keyframes moveingY { 0%, 100% { transform : translateY(0px); } 50% { transform: translateY(20px); }}
@keyframes moveingX { 0%, 100% { transform : rotate(0deg); } 50% { transform: rotate(-15deg); }}

/* Project Member Section */
.member-section {padding: 80px 0px 0px; background-image: url(../../images/case-studies/pioneers-learning-hub/member-section-line-shap-bg.png); background-repeat: repeat; position: relative; z-index: 3;}
.member-section h2 {margin: 0px; font-size: 0px; line-height: 0px;}
.member-section h3 {margin: 0px;}
.member-group {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.member-item {padding: 0px 30px 50px; box-shadow: 2px 4px 30px 0px #7D83911A; background-color: var(--color-white); border-radius: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; transition: all ease-in-out 0.3s; border: 1px solid #0055EE33;}
.member-item:hover {transform: translateY(-15px); border-color: var(--primary-color);}
.member-icon {width: 80px; height: 80px; border-radius: 50%; background-color: var(--primary-light-color); display: inline-flex; align-items: center; justify-content: center; margin: -40px auto 12px; transition: all ease-in-out 0.3s; position: relative;}
.member-icon::after {content: ''; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--primary-color-15); border-radius: 50%; animation-delay: 0.5s; animation: smallScale 3s infinite;}
.member-sub-title {margin: 0px;}
.member-title {color: var(--primary-color); margin: 0px;}
.member-dis {color: var(--secondary);}
@keyframes smallScale { 0% { transform: translate(-50%, -50%) scale(1);} 100% { transform: translate(-50%, -50%) scale(1.5);}}

/* Project Member Timeline Section  */
.member-project-group {display: grid; grid-template-columns: 1fr 1fr; gap: 30px;}
.member-project-item {display: flex; overflow: hidden; gap: 40px; flex-direction: column; background-color: var(--color-white); box-shadow: 2px 4px 30px 0px #7D83911A; border: 1px solid #0055EE33; border-radius: 18px;}
.member-project-item h3 {margin-bottom: 10px;}
.member-project-item-images {height: 290px;  position: relative;}
.member-project-item-content {flex: 1 1 0;}
.member-project-item-content p {color: var(--secondary);}
.member-project-one {padding: 40px;}
.member-project-one .member-project-item-images {background: url(../../images/case-studies/pioneers-learning-hub/member-projece-one-bg.png) no-repeat center; background-size: cover; overflow: hidden; display: flex; align-items: start; justify-content: center; } 
.member-project-one .image1 {margin: 35px -68px 0px 0px; position: relative; z-index: 1; animation: imagemoveX 3s ease-out infinite;}
@keyframes imagemoveX { 0% { transform: translateX(0); } 50% { transform: translateX(-20px); } 100% { transform: translateX(0); } }
.member-project-two {padding: 40px 0px 0px;}
.member-project-two .member-project-item-images {padding: 0px 40px 0px; display: flex; justify-content: center;}
.member-project-two .member-project-item-content {padding: 0px 40px 40px; background-color: var(--color-white); position: relative;}
.member-project-two-layer-group {width: 565px; height: 565px; position: relative;}
.member-project-two-layer-group .layer { position: absolute; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); animation: scaleIn 1.5s ease-out forwards;}
.member-project-two-layer-group .layer1 { width: 100%; height: 100%; background: linear-gradient(180deg, #0055EE -27.54%, rgba(255, 245, 238, 0) 55.26%); animation-delay: 0s;}
.member-project-two-layer-group .layer2 { width: 75%; height: 75%; background: linear-gradient(178.24deg, #0055EE -35.3%, rgba(255, 245, 238, 0) 59.28%); animation-delay: 0.3s;}
.member-project-two-layer-group .layer3 { width: 45%; height: 45%; background: linear-gradient(180deg, #0055EE -39.86%, rgba(255, 245, 238, 0) 58.71%); animation-delay: 0.6s;}
@keyframes scaleIn { 0% { transform: translate(-50%, -50%) scale(0); } 100% { transform: translate(-50%, -50%) scale(1); }}
.member-project-two-layer-group .tech-icon { position: absolute; width: 64px; height: 64px; background: var(--color-white); box-shadow: 0px 0px 13.81px 0px #44489E26; border-radius: 50%; display: flex; justify-content: center; align-items: center; top: 50%; left: 50%; margin-top: -32px; margin-left: -32px; animation: fadeIn 1s ease-out forwards;}
.member-project-two-layer-group .icon1 { animation: fadeIn 1s ease-out forwards 0.8s, orbit1 9s linear infinite 2.5s; }
.member-project-two-layer-group .icon2 { animation: fadeIn 1s ease-out forwards 1s, orbit2 7s linear infinite 2.3s; }
.member-project-two-layer-group .icon3 { animation: fadeIn 1s ease-out forwards 1.2s, orbit3 5s linear infinite 2.1s; }
.member-project-two-layer-group .icon4 { animation: fadeIn 1s ease-out forwards 1s, orbit4 7s linear infinite 1.5s; }
@keyframes fadeIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes orbit1 { 0% { transform: rotate(0deg) translateX(280px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(280px) rotate(-360deg); } }
@keyframes orbit2 { 0% { transform: rotate(120deg) translateX(210px) rotate(-120deg); } 100% { transform: rotate(480deg) translateX(210px) rotate(-480deg); } }
@keyframes orbit3 { 0% { transform: rotate(240deg) translateX(126px) rotate(-240deg); } 100% { transform: rotate(600deg) translateX(126px) rotate(-600deg); } }
@keyframes orbit4 { 0% { transform: rotate(120deg) translateX(210px) rotate(-120deg); } 100% { transform: rotate(480deg) translateX(210px) rotate(-480deg); } }

/* Features Section */
.features-content {text-align: center; max-width: 370px; color: var(--secondary);}
.features-content strong {font-weight: 700 !important; color: var(--primary-color); position: relative; padding-left: 15px;}
.features-content strong::before {content: ''; width: 6px; height: 6px; border-radius: 50%; background-color: var(--primary-color); position: absolute; top: 8px; left: 0;}
.features-group {display: grid; grid-template-columns: 28% 47% 25%;}
.features-moc {max-width: 617px; display: flex; flex-direction: column; align-items: center; gap: 50px; margin-top: 30px;}
.features-content-side {display: flex; flex-direction: column; justify-content: space-around; align-items: end; padding-bottom: 60px;}
.features-content-side .features-content:first-child, .features-content-side .features-content:last-child {margin-right: -50px;}
.features-content-side-right {display: flex; align-items: end; padding-bottom: 44%;}

/* Project Challenges Section */
.project-challenges-section {position: relative; background-image: url(../../images/case-studies/hupr/project-challenges-left-shap.webp); background-repeat: no-repeat; background-position: bottom left;}
.project-challenges-section::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../../images/case-studies/hupr/project-challenges-right-shap.webp) no-repeat 100% 0px;}
.project-challenges-group {display: grid; grid-template-columns: 1fr; gap: 60px; position: relative;}
.project-challenges-item {border-radius: 18px; display: flex; gap: 50px; padding: 0px 40px; background-color: var(--color-white); box-shadow: 2px 4px 30px 0px #7D83911A;}
.project-challenges-item img {object-fit: contain;}
.project-challenges-image {text-align: center; display: flex; align-items: end; flex: 0 0 auto;}
.project-challenges-item-two .project-challenges-image img {margin-top: -30px;}
.project-challenges-content {padding-block: 40px; display: flex; flex-direction: column; justify-content: center;}
.project-challenges-content-title {margin-bottom: 24px;}
.project-challenges-content-list li:not(:last-child) {margin-bottom: 16px;}
.project-challenges-content-list li {padding-left: 34px; font-size: 20px; line-height: 28px; position: relative; color: var(--secondary);}
.project-challenges-content-list li::before{content: ''; width: 24px; height: 24px; position: absolute; top: 50%; transform: translateY(-50%); left: 0; border-radius: 50%; background-color: var(--primary-color); background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" rx="12" fill="%230055EE"/><path d="M10.43 14.8208L17.21 8.04078C17.37 7.88078 17.5567 7.80078 17.77 7.80078C17.9833 7.80078 18.17 7.88078 18.33 8.04078C18.49 8.20078 18.57 8.39091 18.57 8.61118C18.57 8.83145 18.49 9.02131 18.33 9.18078L10.99 16.5408C10.83 16.7008 10.6433 16.7808 10.43 16.7808C10.2167 16.7808 10.03 16.7008 9.86999 16.5408L6.42999 13.1008C6.26999 12.9408 6.19319 12.7509 6.19959 12.5312C6.20599 12.3114 6.28945 12.1213 6.44999 11.9608C6.61052 11.8002 6.80065 11.7202 7.02039 11.7208C7.24012 11.7213 7.42999 11.8013 7.58999 11.9608L10.43 14.8208Z" fill="white"/></svg>');}
.project-challenges-content-list li strong {font-weight: 700 !important;}

/* Gallery Design Section */
.gallery-section .section-inner-head  h2 {font-size: 0px; line-height: 0px; margin: 0px;}
.gallery-design-group {display: grid; grid-template-columns: 1fr 1fr; gap: 60px;}
.gallery-design-group .full-width {grid-column: 2 span;}
.gallery-design-item {border-radius: 60px; overflow: hidden; background: linear-gradient(270deg, #5F91DE 0%, #193FA5 100%);}

/* Colors Typography Section */
.color-typography-section .section-inner-head {max-width: 790px; margin-inline: auto;}
.color-typography-group {display: flex; max-width: 1100px; margin: 0 auto;}
.colors-side {width: 60%; display: flex; justify-content: end; overflow: hidden;}
.typography-side {width: 40%;}
.color-group {display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; max-width: 576px;}
.color-type-name {height: 180px; width: 180px; border: 15px solid var(--color-white); border-radius: 50%; background-color: var(--color-code); margin-bottom: 30px;}
.color-type:nth-child(2) {left: -50px;}
.color-type:nth-child(3) {left: -100px;}
.color-type:nth-child(4) {left: -150px;}
.color-typography-item, .color-type {position: relative;}
.color-type .color-name {margin-bottom: 4px;}
.typography-font-group {display: flex; gap: 10px;}
.typography-font-type {font-weight: 700; font-size: 100px; line-height: 1; margin-bottom: 20px; text-transform: capitalize;}
.typography-font-name, .color-type .color-name {font-weight: 700;}
.typography-font-name {margin-bottom: 0px;}
.typography-font-style {word-break: break-all; font-weight: 500; color: var(--secondary);}
.typography-font-weight {display: inline-flex; align-items: center; margin-bottom: 20px; padding: 4px 10px; border: 1px solid var(--blue-border-color); border-radius: 4px; font-size: 20px; line-height: 28px;}
.typography-font-weight li:not(:last-child) {padding-right: 12px; margin-right: 12px; border-right: 1px solid rgb(37 57 92 / 10%);}

/* Timeline Section */
.timeline-section .section-inner-head {max-width: 750px; margin-inline: auto;}
.timeline-section .timeline-map {text-align: center;}
.timeline-section .timeline-map img {max-width: 916px; width: 100%;}

/* Visual Design Section */
.visual-design-section {text-align: center; position: relative;  overflow: hidden;}
.visual-design-section > div {position: relative;}
.visual-design-section .section-inner-head {max-width: 742px; text-align: center; margin-inline: auto;}
.visual-design-section::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 100%; background-repeat: no-repeat; background-position: top left;  background-image: url(../../images/case-studies/hupr/visule-design-bg.webp); z-index: -1;}
.visual-moc-container {display: grid; overflow: hidden; max-width: 100%; grid-template-columns: repeat(7, 1fr); padding-inline: 76px; padding-top: 20px; gap: 10px;}
.visual-moc-image {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;}

/*-------------------============ Responsive CSS ==============--------------------- */


@media screen and (max-width : 1441px) {
    /* Banner Section */
    .banner-sub-title {font-size: var(--font-18); line-height: 27px; margin-bottom: 20px;}
    .banner-title {margin-bottom: 20px;}

    /* Project Member Section */
    .member-item {padding-bottom: 40px;}
    
    /* Project Member Timeline Section  */
    .member-project-item-images {height: 240px;}
    .member-project-one .image1 {width: 250px; margin: 29px -62px 0px 0px;}
    .member-project-one .image2 {width: 220px;}
    .member-project-two-layer-group {width: 478px; height: 478px;}
    .member-project-two-layer-group .tech-icon {width: 56px; height: 56px; margin-top: -28px; margin-left: -28px;}
    @keyframes orbit1 { 0% { transform: rotate(0deg) translateX(239px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(239px) rotate(-360deg); } }
    @keyframes orbit2 { 0% { transform: rotate(120deg) translateX(179px) rotate(-120deg); } 100% { transform: rotate(480deg) translateX(179px) rotate(-480deg); } }
    @keyframes orbit3 { 0% { transform: rotate(240deg) translateX(108px) rotate(-240deg); } 100% { transform: rotate(600deg) translateX(108px) rotate(-600deg); } }
    @keyframes orbit4 { 0% { transform: rotate(120deg) translateX(179px) rotate(-120deg); } 100% { transform: rotate(480deg) translateX(179px) rotate(-480deg); } }


    /* Features Section */
    .features-group {grid-template-columns: 27% 46% 27%;}

    /* Project Challenges Section */
    .project-challenges-content-title {margin-bottom: 20px;}
    .project-challenges-content-list li {font-size:18px}

    /* Gallery Design Section */
    .gallery-design-group {gap: 50px;}

    /* Colors Typography Section */
    .typography-font-type {font-size: 90px;}
    .typography-font-weight {font-size: 18px;}

    /* Visual Design Section */
    .visual-moc-container {padding-inline: 50px;}
}

@media screen and (max-width : 1199px) {
    /* Banner Section */
    .banner-sub-title{font-size: var(--font-16); line-height: 26px;}
    .bottom-content {max-width: 800px;}
    .top-left {width: 150px;}
    .top-right {width: 200px; right: 0;}

    /* Project Member Section */
    .member-item {gap: 10px;}
    .member-icon{width: 60px; height: 60px; margin: -30px 0px 5px; padding: 7px;}

    /* Features Section */
    .features-moc {gap: 30px;}
    .features-moc {margin-top: 20px;}
    .features-content {max-width: 300px;}

    /* Project Challenges Section */
    .project-challenges-section::before {background-size: 50%;}
    .project-challenges-section {background-size: 20%;}
    .project-challenges-content-title {margin-bottom: 15px;}
    .project-challenges-content-list li::before {height: 20px; width: 20px; background-size: 17px;}
    .project-challenges-content-list li {font-size:16px; line-height: 26px;}
    
    /* Gallery Design Section */
    .gallery-design-group {gap: 40px;}

    /* Colors Typography Section */
    .typography-font-type {font-size: 70px;}
    .typography-font-weight {font-size: 16px; line-height: 26px;}

    /* Timeline Section */
    .timeline-section .timeline-map img {max-width: 700px;}
    
    /* Visual Design Section */
    .visual-moc-container {padding-inline: 25px;}
    .visual-design-section::before {background-position: 0px 100px;}
}


@media screen and (max-width: 1199px) and (min-width: 1025px){
    /* Project Member Timeline Section  */
    .member-project-item {gap: 30px;}
    .member-project-item-images {height: 225px;}
    .member-project-one .image1 {width: 74%;}
    .member-project-one {padding: 30px;}
    .member-project-two {padding: 30px 0px 0px;}
    .member-project-two .member-project-item-images {padding: 0px 30px 0px;}
    .member-project-two .member-project-item-content {padding: 0px 30px 30px;}
    .member-project-two-layer-group {width: 410px; height: 410px;}
    @keyframes orbit1 { 0% { transform: rotate(0deg) translateX(205px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(205px) rotate(-360deg); } }
    @keyframes orbit2 { 0% { transform: rotate(120deg) translateX(154px) rotate(-120deg); } 100% { transform: rotate(480deg) translateX(154px) rotate(-480deg); } }
    @keyframes orbit3 { 0% { transform: rotate(240deg) translateX(92px) rotate(-240deg); } 100% { transform: rotate(600deg) translateX(92px) rotate(-600deg); } }
    @keyframes orbit4 { 0% { transform: rotate(120deg) translateX(154px) rotate(-120deg); } 100% { transform: rotate(480deg) translateX(154px) rotate(-480deg); } }
}

@media screen and (max-width:1024px) {
     /* Project Member Timeline Section  */
    .member-project-group {grid-template-columns: 1fr;}
}

@media screen and (max-width : 991px) {
    /* Banner Section */
    .banner-section {padding-top: 80px;}
    .bottom-content {max-width: 500px;}
    .top-left {width: 100px;}
    .top-right {width: 140px; }

    /* Project Member Section */
    .member-section{padding-top: 50px;}

    /* Features Section */
    .features-section .features-group {display: none;}
    .features-mobile-group .features-moc {margin: 0px auto 40px;}
    .features-mobile-group .features-moc img {max-width: 500px; width: 100%;}
    .features-content {margin: 0px; max-width: 100%; text-align: start;}
    .features-content-side {display: grid; grid-template-columns: 1fr 1fr; gap: 24px; justify-content: start; align-items: start;}

    /* Project Challenges Section */
    .project-challenges-group {gap: 40px;}
    .project-challenges-item { gap: 30px; padding-inline: 30px;}
    .project-challenges-content {padding-block: 30px;}
    .project-challenges-image {width: 40%;}

    /* Gallery Design Section */
    .gallery-design-item {border-radius: 30px;}

    
    /* Colors Typography Section */
    .color-group {margin-right: -90px;}
    .color-type-name {height: 115px; width: 115px; border-width: 12px;}
    .color-type:nth-child(2) {left: -30px;}
    .color-type:nth-child(3) {left: -60px;}
    .color-type:nth-child(4) {left: -90px;}

}

@media screen and (max-width : 768px) {
    /* Banner Section */
    .banner-section>div{padding-inline: 0px;}
    .banner-content {padding-inline: 25px; max-width: 100%;}
    .top-left {top: 0; left: 36%;}
    .top-right {right: 58%; top: 60%;}
    
    /* Project Member Section */
    .member-group {grid-template-columns: 1fr; gap: 60px;}

    /* Project Member Timeline Section  */
    .member-project-item {gap: 30px;}
    .member-project-one {padding: 30px;}
    .member-project-two {padding: 30px 0px 0px;}
    .member-project-two .member-project-item-images {padding: 0px 30px 0px;}
    .member-project-two .member-project-item-content {padding: 0px 30px 30px;}
    .member-project-one .member-project-item-images {padding-inline: 0px; height: unset;}
    .member-project-one .member-project-item-images img{width: 100%;}
    .member-project-item-images {height: 145px;}
    .member-project-two-layer-group .tech-icon { width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; padding: 8px;}
    .member-project-two-layer-group .tech-icon img {max-height: 30px;}
    .member-project-two-layer-group {width: 290px; height: 290px;}
    @keyframes orbit1 { 0% { transform: rotate(0deg) translateX(145px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(145px) rotate(-360deg); } }
    @keyframes orbit2 { 0% { transform: rotate(120deg) translateX(109px) rotate(-120deg); } 100% { transform: rotate(480deg) translateX(109px) rotate(-480deg); } }
    @keyframes orbit3 { 0% { transform: rotate(240deg) translateX(65px) rotate(-240deg); } 100% { transform: rotate(600deg) translateX(65px) rotate(-600deg); } }
    @keyframes orbit4 { 0% { transform: rotate(120deg) translateX(109px) rotate(-120deg); } 100% { transform: rotate(480deg) translateX(109px) rotate(-480deg); } }
    
    /* Project Challenges Section */
    .project-challenges-section::before {background-size: 80%;}
    .project-challenges-section {background-size: 50%;}
    .project-challenges-item {flex-direction: column; padding: 30px;}
    .project-challenges-content {padding: 0px;}
    .project-challenges-image {width: 100%; justify-content: center;}
    .project-challenges-item-two .project-challenges-image img {margin: 0px;}
    .project-challenges-item-two {flex-direction: column-reverse;}

    /* Gallery Design Section */
    .gallery-design-group {gap: 30px; grid-template-columns: 1fr;}
    .gallery-design-item {border-radius: 30px;}
    .gallery-design-group .full-width {grid-column: 1 span;}

    /* Colors Typography Section */
    .color-typography-group {flex-direction: column; gap: 30px;}
    .colors-side, .typography-side {width: 100%;}
    .color-type-name {margin-bottom: 12px;}
    .colors-side , .typography-font-group{justify-content: center;}
    .typography-group {text-align: center;}
    .typography-font-style {margin-inline: auto;}
}


@media screen and (max-width:576px) {
    /* Banner Section */
    .bottom-content {text-align: center;}
    .top-left {width: 80px;}
    .top-right {width: 100px;}

    /* Features Section */
    .features-mobile-group .features-moc {margin-bottom: 20px;}
    .features-content-side {grid-template-columns: 1fr;}

    /* Colors Typography Section */
    .color-group {grid-template-columns: repeat(2, 1fr); gap: 24px; margin-right: 0px;}
    .color-group .color-type {left: 0; }
    .color-type-name {border-width: 0px;}
    .typography-font-group {flex-direction: column; align-items: center;}

    
    /* Visual Design Section */
    .visual-design-section .desktop-moc {display: none;}
    .visual-design-section::before {background-position: 0px 150px;}
    .visual-moc-container {grid-template-columns: repeat(2, 1fr);}
}


@media screen and (max-width:400px) {
    /* Project Member Timeline Section */
    .member-project-item-images {height: 104px;}
    .member-project-two-layer-group .tech-icon { width: 30px; height: 30px; margin-top: -15px; margin-left: -15px;}
    .member-project-two-layer-group .tech-icon img {max-height: 20px;}
    .member-project-two-layer-group {width: 208px; height: 208px;}
    @keyframes orbit1 { 0% { transform: rotate(0deg) translateX(104px) rotate(0deg); } 100% { transform: rotate(360deg) translateX(104px) rotate(-360deg); } }
    @keyframes orbit2 { 0% { transform: rotate(120deg) translateX(78px) rotate(-120deg); } 100% { transform: rotate(480deg) translateX(78px) rotate(-480deg); } }
    @keyframes orbit3 { 0% { transform: rotate(240deg) translateX(47px) rotate(-240deg); } 100% { transform: rotate(600deg) translateX(47px) rotate(-600deg); } }
    @keyframes orbit4 { 0% { transform: rotate(120deg) translateX(78px) rotate(-120deg); } 100% { transform: rotate(480deg) translateX(78px) rotate(-480deg); } }

}