@import url('https://fonts.googleapis.com/css?family=Pacifico');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700');
 
* {
  margin: 0;
  padding: 0;
}  

body {
  font-family: "Source Sans Pro";
  max-width: 100vw;
  overflow-x: hidden;
}

h1 {
  color: #272727;
  font-size: 96px;
  font-weight: 700;
}

h2 {
  color: #151515;
  font-size: 64px;
  font-weight: 700;
}

h6 {
  color: #D6D6D6;
  font-size: 24px;
  font-weight: 600;
  text-transform: uppercase;
}

p.description {
  color: #5A5A5A;
  font-size: 24px;
  font-weight: normal;
}

h1::selection {
  color: white;
  background: #272727;
}

h1::-moz-selection {
  color: white;
  background: #272727;
}

.section {
  width: 100vw;
  height: 100vh;
  min-height: 800px;
  background: white;
  position: relative;
}

.sectionWrapper {
  width: 85%;
  height: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.background {
  width: 100vw;
  height: 100vh;
  min-height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

nav {
  width: 100vw;
  height: 100px;
  background: white;
  position: absolute;
  top: 0;
  animation: 2s fadeInNav ease;
}

@keyframes fadeInNav {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    top: -25px;
  }
  100% {
    opacity: 1;
    top: 0;
  } 
}

.navWrapper {
  width: 85%;
  margin: auto;
  padding-top: 24px;
}

#logo {
  color: #292929;
  font-size: 30px;
  font-family: "Pacifico";
  font-weight: normal;
  text-decoration: none;
}

.right {
  float: right;
}

#nav-icon {
  width: 60px;
  height: 45px;
  position: relative;
  z-index: 2;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg) scale(0.4);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  margin-top: 10px;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #292929;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon span:nth-child(2) {
  top: 18px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon span:nth-child(3) {
  top: 36px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -3px;
  left: 8px;
  background: white;
}

#nav-icon.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
  background: white;
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 39px;
  left: 8px;
  background: white;
}

.overlay {
  width: 100%;
  height: 100%;
  background: #151515;
  position: fixed;
  top: 0;
  left: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 0;
  z-index: 1;
  visibility: hidden;
  display: flex;
  align-items: center;
}

.overlay.open {
  opacity: 1;
  visibility: visible;
}

.overlay a {
  color: white;
  font-size: 54px;
  font-weight: bold;
  text-decoration: none;
  display: block;
  margin-left: 135px;
  margin-bottom: 15px; 
  opacity: 0;
  transition: transform 0.2s ease;
  overflow: hidden;
}

.overlay p {
  color: #4B4B4B;
  font-size: 20px;
  font-weight: normal;
  position: absolute;
  bottom: 100px;
  margin-left: 135px;
  opacity: 0;
}

.overlay p.open {
  opacity: 1;
  animation: 1.70s fadeInCopyright ease;
}

@keyframes fadeInCopyright {
  0%{
    opacity: 0;
  }
  80%{
    opacity: 0;
    transform: translateY(-10px);
  }
  100%{
    opacity: 1;
  }
}

.overlay a:after {
  position: absolute;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: white;
  left: 0;
}

.overlay a:hover:after {
  width: 100%;
  left: 0;
}

.overlay a.open:hover {
  transform: translateY(2px);
}

.overlay a.open:nth-child(1) {
  opacity: 1;
  animation: 1s fadeInLinks1 ease;
}

@keyframes fadeInLinks1 {
  0%{
    opacity: 0;
  }
  50%{
    opacity: 0;
    transform: translateY(-10px);
  }
  100%{
    opacity: 1;
  }
}

.overlay a.open:nth-child(2) {
  opacity: 1;
  animation: 1.25s fadeInLinks2 ease;
}

@keyframes fadeInLinks2 {
  0%{
    opacity: 0;
  }
  60%{
    opacity: 0;
    transform: translateY(-10px);
  }
  100%{
    opacity: 1;
  }
}

.overlay a.open:nth-child(3) {
  opacity: 1;
  animation: 1.5s fadeInLinks3 ease;
} 
  
@keyframes fadeInLinks3 {
  0%{
    opacity: 0;
  }
  70%{
    opacity: 0;
    transform: translateY(-10px);
  }
  100%{
    opacity: 1;
  }
} 

#services {
  width: 201px;
}

#work {
  width: 224px;
}

#contact {
  width: 187px;
}

.header {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.headerWrapper {
  text-align: center;
  position: relative;
  padding: 56px 71px 128px 108px;
}

.headerWrapper h6 {
  animation: 1s fadeIn ease;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.headerWrapper h1 {
  animation: 1.5s fadeInTitle ease;
}

@keyframes fadeInTitle {
  0% {  
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.circle {
  border-radius: 50%;
	width: 100px;
	height: 100px; 
}

.circle.blue {
  background: linear-gradient(#4F3DD5, #3DB2D5);
  position: absolute;
  top: 21px;
  left: 0px;
  animation: circleBlueMove 2s ease;
  box-shadow: 3px 3px 15px rgba(61, 178, 213, 0.4);
}

@keyframes circleBlueMove {
  0% {
    opacity: 0;
    transform: translate(200px, 75px) rotate(90deg);
  }
  100% {
    opacity: 1;
  }
}

.circle.orange { 
  background: linear-gradient(#D53D3D, #D5B83D);
  position: absolute;
  bottom: 0px;
  right: 0px;
  animation: circleOrangeMove 2s ease;
  box-shadow: 3px 3px 15px rgba(213, 184, 61, 0.4);
}

@keyframes circleOrangeMove {
  0% {
    opacity: 0;
    transform: translate(-200px, -75px) rotate(90deg);
  }
  35% {
    opacity: 0;
    transform: translate(-200px, -75px) rotate(90deg);
  }
  100% {
    opacity: 1;
  }
}

.square {
  width: 100px;
  height: 100px;
}
 
.square.red {
  background: linear-gradient(135deg, #D53D3D, #D53DC9);
  position: absolute;
  top: 15px; 
  right: 15px;
  animation: squareRedMove 2s ease;
  box-shadow: 3px 3px 15px rgba(213, 61, 201, 0.4);
  transform: rotate(45deg);
} 

@keyframes squareRedMove {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
    transform: translate(-200px, 75px) rotate(90deg);
  }
  100% {
    opacity: 1;
  }
}

.triangle svg {
  width: 175px;
  height: 175px;
  position: absolute;
  bottom: -17px; 
  left: -20px;  
  animation: triangleGreendMove 2s ease;
} 

@keyframes triangleGreendMove {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    transform: translate(200px, -75px) rotate(90deg);
  }
  100% {
    opacity: 1;
  }
}

/* Services */

.services h6 {
  margin-bottom: 5px;
}

.services h2 {
  margin-bottom: 15px;
}

.services .description {
  margin-bottom: 60px;
  width: 685px;
  line-height: 40px;
}

.services .grid {
  display: grid;
  grid-template-columns: 500px 500px;
  grid-column-gap: 130px;
  grid-template-rows: 150px 150px;
  grid-row-gap: 30px;
}

.services .grid .card {
  width: 420px;
  padding: 43px 40px;
  background: linear-gradient(to bottom right, #313131, #0F0F0F);
  border-radius: 5px;
  display: block;
}

.services .grid .card h3 {
  color: white;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 5px;
}

.services .grid .card p {
  color: #C3C3C3;
  font-size: 22px;
  font-weight: normal;
}

.square.blue { 
  position: absolute;
  box-shadow: 3px 3px 15px rgba(61, 178, 213, 0.4);
  background: linear-gradient(#4F3DD5, #3DB2D5);
  top: 100px;
  right: 75px;
  width: 125px;
  height: 125px;
  opacity: 0.01;
  transition: all 0.05s ease;
  transform: translateX(125px);
}

 .square.blue.in-view {
  transform: rotate(22.5deg) translateX(0px);
  opacity: 1;
  transition: all 1s ease;
}

/* Responsive */

@media (max-width: 1280px) {
  
  .services .grid {
    display: grid;
    grid-template-columns: 500px 500px;
    grid-column-gap: 50px;
    grid-template-rows: 150px 150px;
    grid-row-gap: 30px;
  }
}

@media (max-width: 1200px) {
  
  .services .sectionWrapper {
    padding-top: 185px;
    padding-bottom: 185px;
  }
  
  .services .grid {
    display: grid;
    grid-template-columns: 480px;
    grid-template-rows: 150px 150px;
    grid-row-gap: 30px;
  }
  
  .services .grid .card {
    width: 420px;
    padding: 43px 40px;
    background: linear-gradient(to bottom right, #313131, #0F0F0F);
    border-radius: 5px;
  }
}

@media (max-width: 850px) {
  
  .services .sectionWrapper {
    padding-top: 150px;
    padding-bottom: 150px;
  }
  
  h6 {
    font-size: 22px;
  }
  
  h2 {
    font-size: 48px;
  }
  
  .services .description {
    font-size: 22px;
    width: initial;
  }
  
  .services .square.blue {
    width: 75px;
    height: 75px;
  }
   
   .services .grid {
    display: grid;
    grid-template-columns: 85%;
    grid-template-rows: initial;
    grid-row-gap: 25px;
  }
  
  .services .grid .card {
    width: 100%;
    padding: 31.5px 30px;
    background: linear-gradient(to bottom right, #313131, #0F0F0F);
    border-radius: 5px;
  } 

  .services .grid .card h3 {
    color: white;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
  }

  .services .grid .card p {
    color: #C3C3C3;
    font-size: 20px;
    font-weight: normal;
  }
}

@media (max-width: 850px) and (min-width: 440px){

.headerWrapper {
   position: static;
  padding: 0;
}
  
.overlay a {
  color: white;
  font-size: 36px;
  font-weight: bold;
  text-decoration: none;
  display: block;
  margin-left: 40px;
  margin-bottom: 10px; 
  opacity: 0;
  transition: transform 0.2s ease;
  overflow: hidden;
}

.overlay p {
    margin-left: 40px;
}
  
#services {
  width: 134px;
}

#work {
  width: 150px;
}

#contact {
  width: 125px;
}
   
h6 {
  font-size: 22px;
}
  
.headerWrapper h1 {
  color: #272727;
  font-size: 56px;
  font-weight: 700;
  animation: 1.5s fadeInTitle ease;
}
  
.circle {
  border-radius: 50%;  
	width: 75px;
	height: 75px; 
}

.circle.blue {
  background: linear-gradient(#4F3DD5, #3DB2D5);
  position: absolute;
  top: 129px;
  left: 50px;
  animation: circleBlueMove 2s ease;
  box-shadow: 3px 3px 15px rgba(61, 178, 213, 0.4);
}
 
@keyframes circleBlueMove {
  0% {
    opacity: 0;
    transform: translate(200px, 75px) rotate(90deg);
  }
  100% {
    opacity: 1;
  }
}

.circle.orange { 
  background: linear-gradient(#D53D3D, #D5B83D); 
  position: absolute;
  top: 520px;
  right: 50px;
  animation: circleOrangeMove 2s ease;
  box-shadow: 3px 3px 15px rgba(213, 184, 61, 0.4);
}

@keyframes circleOrangeMove {
  0% {
    opacity: 0;
    transform: translate(-200px, -75px) rotate(90deg);
  }
  35% {
    opacity: 0;
    transform: translate(-200px, -75px) rotate(90deg);
  }
  100% {
    opacity: 1;
  }
}

.square {
  width: 75px;
  height: 75px;
}
 
.square.red {
  background: linear-gradient(135deg, #D53D3D, #D53DC9); 
  position: absolute;
  top: 130px; 
  right: 50px; 
  animation: squareRedMove 2s ease;
  box-shadow: 3px 3px 15px rgba(213, 61, 201, 0.4);
  transform: rotate(45deg);
} 

@keyframes squareRedMove {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
    transform: translate(-200px, 75px) rotate(90deg);
  }
  100% {
    opacity: 1;
  }
}

.triangle svg {  
  width: 125px;
  height: 125px;
  position: absolute;
  top: 480px;
  left: 25px;
  animation: triangleGreendMove 2s ease;
}

@keyframes triangleGreendMove {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    transform: translate(200px, -75px) rotate(90deg);
  }
  100% {
    opacity: 1;
  }
}
}

@media (max-width: 440px) {

  .background {
    max-height: 700px;
  }
  
  .headerWrapper {
    position: static;
    padding: 0;
  }
  
.overlay a {
  color: white;
  font-size: 36px;
  font-weight: bold;
  text-decoration: none;
  display: block;
  margin-left: 40px;
  margin-bottom: 10px; 
  opacity: 0;
  transition: transform 0.2s ease;
  overflow: hidden;
}
  
.overlay p {
  margin-left: 40px;
  position: static;
  margin-top: 40px;
}
  
#services {
  width: 134px;
}

#work {
  width: 150px;
}

#contact {
  width: 125px;
}
   
.headerWrapper h6 {
  color: #D6D6D6;
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  animation: 1s fadeIn ease;
}
  
.headerWrapper h1 {
  color: #272727;
  font-size: 48px;
  font-weight: 700;
  animation: 1.5s fadeInTitle ease;
}
  
.circle {
  border-radius: 50%;  
	width: 75px;
	height: 75px; 
}

.circle.blue {
  background: linear-gradient(#4F3DD5, #3DB2D5);
  position: absolute;
  top: 169px;
  left: 25px;
  animation: circleBlueMove 2s ease;
  box-shadow: 3px 3px 15px rgba(61, 178, 213, 0.4);
}
 
@keyframes circleBlueMove {
  0% {
    opacity: 0;
    transform: translate(100px, 75px) rotate(90deg);
  }
  100% {
    opacity: 1;
  }
}

.circle.orange { 
  background: linear-gradient(#D53D3D, #D5B83D); 
  position: absolute;
  top: 480px;
  right: 25px;
  animation: circleOrangeMove 2s ease;
  box-shadow: 3px 3px 15px rgba(213, 184, 61, 0.4);
}

@keyframes circleOrangeMove {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0;
    transform: translate(-100px, -75px) rotate(90deg);
  }
  100% {
    opacity: 1;
  }
}

.square {
  width: 75px;
  height: 75px;
}
 
.square.red {
  background: linear-gradient(135deg, #D53D3D, #D53DC9); 
  position: absolute;
  top: 170px; 
  right: 25px; 
  animation: squareRedMove 2s ease;
  box-shadow: 3px 3px 15px rgba(213, 61, 201, 0.4);
  transform: rotate(45deg);
} 

@keyframes squareRedMove {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
    transform: translate(-100px, 75px) rotate(90deg);
  }
  100% {
    opacity: 1;
  }
}

.triangle svg {  
  width: 125px;
  height: 125px;
  position: absolute;
  top: 450px;
  left: 5px;
  animation: triangleGreendMove 2s ease;
}

@keyframes triangleGreendMove {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    transform: translate(100px, -75px) rotate(90deg);
  }
  100% {
    opacity: 1;
  }
}
  
  .square.blue {
    top: 30px;
    right: 10px;
    transform: translateX(60px);
  }
  
   .square.blue.in-view {
      transform: rotate(22.5deg) translateX(0px);
  }

}


html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 确保整个视口完全填满 */
  display: flex;
  flex-direction: column; /* 垂直布局 */
}

.content {
  flex: 1; /* 自动填充所有可用空间，推动页脚到底部 */
}

footer {
  width: 100%;
  height: 40px;
  background-color: #ffffff;
  color: black;
  text-align: center;
  line-height: 40px;
}

a {
  color: black;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}