/*--------------------------------------------------------------

## Dashboard - 

--------------------------------------------------------------*/


 

.solar-system {
    transform: scale(calc((1 * var(--responsive-30)) * (var(--scale-1, 1))));
  }
  
  .sun {
    height: 80px;
    width: 130px;
    margin-top: -40px;
    margin-left: -65px;
  }
  
  .orbit[orbit="1"] {
    width:300px;
    height:300px;
    margin-top: -150px;
    margin-left: -150px;
    animation: rotate 25s linear infinite;
  }
  
  
  .orbit[orbit="2"] {
    width:500px;
    height:500px;
    margin-top: -250px;
    margin-left: -250px;
    animation: rotate-2 30s linear infinite; 
  }
  
  .orbit[orbit="3"] {
    width:700px;
    height:700px;
    margin-top: -350px;
    margin-left: -350px;
  }
  
  
  .planet {
    height:60px;
    width:60px;
  }
  
  .orbit[orbit="1"] .planet[planet="1"] {
    
    transform: translateX(-50%);
     animation: counter-rotate-1 25s linear infinite; 
  }
  
  .orbit[orbit="1"] .planet[planet="2"] {
    
    transform: translate(-490%,90%);
    animation: counter-rotate-2 25s linear infinite; 
    
  }
  
  .orbit[orbit="1"] .planet[planet="3"] {
    transform: translate(-340%,-290%);
    animation: counter-rotate-3 25s linear infinite;
  }
  
  
  .orbit[orbit="2"] .planet[planet="1"] {
    
    transform: translateX(-50%);
    animation: counter-rotate-4 30s linear infinite;
  }
  
  .orbit[orbit="2"] .planet[planet="2"] {
    
    transform: translate(-850%,90%);
    animation: counter-rotate-5 30s linear infinite;
    
  }
  
  .orbit[orbit="2"] .planet[planet="3"] {
    transform: translate(-510%,-460%);
    animation: counter-rotate-6 30s linear infinite;
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  
  @keyframes rotate-2 {
    from {
      transform: rotate(-180deg);
    }
    to {
      transform: rotate(180deg);
    }
  }
  
  @keyframes counter-rotate-1 {
    from {
      transform: translateX(-50%) rotate(0deg);
    }
    to {
      transform: translateX(-50%) rotate(-360deg);
    }
  }
  
  @keyframes counter-rotate-2 {
    from {
      transform: translate(-490%,90%) rotate(0deg);
    }
    to {
      transform: translate(-490%,90%) rotate(-360deg);
    }
  }
  
  @keyframes counter-rotate-3 {
    from {
      transform: translate(-340%,-290%) rotate(0deg);
    }
    to {
      transform: translate(-340%,-290%) rotate(-360deg);
    }
  }
  
  
  
  @keyframes counter-rotate-4 {
    from {
      transform: translateX(-50%) rotate(180deg);
    }
    to {
      transform: translateX(-50%) rotate(-180deg);
    }
  }
  
  @keyframes counter-rotate-5 {
    from {
      transform: translate(-850%,90%) rotate(180deg);
    }
    to {
      transform: translate(-850%,90%) rotate(-180deg);
    }
  }
  
  @keyframes counter-rotate-6 {
    from {
      transform: translate(-510%,-460%) rotate(180deg);
    }
    to {
      transform: translate(-510%,-460%) rotate(-180deg);
    }
  }
  


@media (max-width: 1920px) {
  
  
  
}

@media (max-width: 1680px) {
  
  .about-intro .container-m {
    --gap-140:0.5;
  }
  
}

@media (max-width: 1440px) {
  
  
  
}

@media (max-width: 1280px) {
  
  
  .about-intro .container-m {
    --gap-140:0;
  }
  
}

@media (max-width: 1120px) {
  
  .about-intro .side {
    --mr--200:2;
  }
  
}

@media (max-width: 960px) {
  
  .about-intro .container-m {
    flex-direction:column;
  }

  .about-intro .main {
    padding-bottom:0px;
  }

  .about-intro .side {
    margin-right:0px;
    width:100%;
    height: calc((25rem * var(--responsive-70)) * (var(--h-400, 1)));
  }
  
  
}

@media (max-width: 640px) {
  
  
  
}

@media (max-width: 480px) {
  
  
.solar-system {
  --scale-1:1.2;
}
  
}

@media (max-width: 360px) {
  
  
  
}






/*--------------------------------------------------------------

## Dashboard - Map

--------------------------------------------------------------*/



@media (max-width: 1920px) {
  
  
  
}

@media (max-width: 1680px) {
  
  
  
}

@media (max-width: 1440px) {
  
  
  
}

@media (max-width: 1280px) {
  
  
  
}

@media (max-width: 1120px) {
  
  
  
}

@media (max-width: 960px) {
  
  .about-map .background img {
    object-fit:cover;   
     object-position: top;
  }

  .about-map .title {
    text-align:left;
  }
  
  
}

@media (max-width: 640px) {
  
  
  
}

@media (max-width: 480px) {
  
  
  
}

@media (max-width: 360px) {
  
  
  
}






/*--------------------------------------------------------------

## Dashboard - Gallery

--------------------------------------------------------------*/



@media (max-width: 1920px) {
  
  
  
}

@media (max-width: 1680px) {
  
  
  
}

@media (max-width: 1440px) {
  
  .about-gallery .item {
    --h-660:0.9;
  }
  
}

@media (max-width: 1280px) {
  
  
  
}

@media (max-width: 1120px) {
  
  .about-gallery .items {
grid-template-columns:1fr 1fr;
  }
  
  
}

@media (max-width: 960px) {
  
  
  .about-gallery .item {
    --h-660:0.8;
  }
  
}

@media (max-width: 640px) {
  
  
  .about-gallery .item {
    --h-660:0.6;
  }
  
}

@media (max-width: 480px) {
  
  
  .about-gallery .item {
    --h-660:0.5;
  }
  
}

@media (max-width: 360px) {
  
  
  
}




/*--------------------------------------------------------------

## Dashboard - Sectors

--------------------------------------------------------------*/



@media (max-width: 1920px) {
  
  
  
}

@media (max-width: 1680px) {
  
  
  
}

@media (max-width: 1440px) {
  
  
  
}

@media (max-width: 1280px) {
  
  .about-sectors .main .items {
    --max-w-700:0.8;
  }

  .about-sectors .side {
    --h-500:0.9;
  }
  
}

@media (max-width: 1120px) {
  
  .about-sectors .body {
    flex-direction:column;
    align-items:flex-start;
  }

  .about-sectors .main .items {
    max-width:100%;
  }

  .about-sectors .side  {
    text-align:center;
  }

  .about-sectors .side img {
    height:auto;
    width:100%;
  }

  
}

@media (max-width: 960px) {
  
  
  
}

@media (max-width: 640px) {
  
  
  
}

@media (max-width: 480px) {
  
.about-sectors .item .title {
  --mb-24:0.9;
}

  .about-sectors .item .desc {
    font-size:14px;
    line-height:1.3;
  }
  
}

@media (max-width: 360px) {
  
  
  
}