body {
    padding:0; 
    margin:0;
    color:#fff;
    background:#2D258A ;
    font-family:'Dosis';
    font-size:16px;
    line-height: 1.3;
    background: #fff;
	
    overflow-x: hidden;
}
@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.wp-block-social-links  * {color:#fff;}

.wrapper {
    width:100%;
    max-width:1200px;
    min-width:320px;
    box-sizing: border-box;
    padding:20px;
    margin:0 auto;
}

/* Header */

header {
    box-sizing: border-box;
    max-width:100%;
    width:100%;
    overflow:hidden;
    position:fixed;
    top:0;
    
    padding:0 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #ffffff22;
    background:#ffffff;
    
    backdrop-filter: blur(5px);
    z-index: 20;
}
header .wrapper {
    height:60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

header nav ul {
    display: flex;
    gap:1.5em;
    list-style:none;
    margin:0;
    padding:0;
}

header nav a {
    color:#191b88;
    font-size:1.1em;
    text-decoration: none;
    position: relative;
}

header nav a:after {
    content:'';
    display:block;
    position:absolute;
    bottom:-4px;
    height:1px;
    width:0%;
    background:#191b88;
    transition:0.3s;
}

header nav li:hover { 
    cursor:pointer;
}

header nav li:hover a::after  { 
    cursor:pointer;
    width:100%;
}

.header_logo {
    height:40px;
    max-width:200px;
}

.header_logo img {
    height:100%;
    width:auto;
}



/* HERO */

.hero {border-top: 1px solid #ffffff55;}
.hero .wrapper {
    border-bottom: 1px solid #ffffff55;
    position:relative;
    z-index:2;
}

.hero_title {
    font-size:4em;
    font-weight:400;
    margin:0.3em 0;
}

.hero_content {
    display: grid;
    grid-template-columns: 1fr ;
    align-items: center;
    text-align: center;
    min-height:600px;
}

.hero_subtitle {
    font-size: 2em;
    opacity:0.7;
}

.hero_image img {
    width:100%;
    height:auto;
}

.hero_button {
    color:#fff;
    display: block;
    width:150px;
    height:50px;
    border:1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.4em;
    text-align: center;
    margin:4em auto;
    border-radius:0.5em;
    transition:0.5s;
}

.hero_button:hover {
    background: #ffffff44;

}

/* HERO ANIMATION */

.hero {
    width:calc(100% - 40px);
    margin:60px 20px 0 20px;
    position: relative;
    border:1px solid #fff;
    border-radius:20px;
    background: linear-gradient(-45deg, #000000, #000000, #431b94, #0c5ce7);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
    overflow: hidden;
  }

  .cube {
    position: absolute;
    width: 100px;
    height: 100px;
    
    transform-origin: top left;
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    animation: cube 16s ease-in forwards infinite;
    border-radius:10%;
    background: url(./../../img/sphere.png);
    background-size: contain;
  }
  
  .cube:nth-child(2n) {
    border-color: #463aeb6c; /* lighten(#0040C1, 10%) заменено на фиксированный цвет */
  }
  
  .cube:nth-child(2) {
    animation-delay: 2s;
    left: 25vw;
    top: 40vh;
  }
  
  .cube:nth-child(3) {
    animation-delay: 4s;
    left: 75vw;
    top: 50vh;
  }
  
  .cube:nth-child(4) {
    animation-delay: 6s;
    left: 90vw;
    top: 10vh;
  }
  
  .cube:nth-child(5) {
    animation-delay: 8s;
    left: 10vw;
    top: 85vh;
  }
  
  .cube:nth-child(6) {
    animation-delay: 10s;
    left: 50vw;
    top: 10vh;
  }
  .cube:nth-child(7) {
    animation-delay: 12s;
    left: 70vw;
    top: 10vh;
  }
  .cube:nth-child(8) {
    animation-delay: 14s;
    left: 70vw;
    top: 20vh;
  }
  .cube:nth-child(9) {
    animation-delay: 5s;
    left: 10vw;
    top: 40vh;
  }
  .cube:nth-child(10) {
    animation-delay: 2s;
    left: 90vw;
    top: 90vh;
  }
  
  @keyframes cube {
    from {
      transform: scale(0) rotate(0deg) translate(-50%, -50%);
      opacity: 1;
    }
    to {
      transform: scale(10) rotate(300deg) translate(-50%, -50%);
      opacity: 0;
    }
  }

/* SERVICES */

.services {
    padding:6em 0 4em 0;
    box-sizing: border-box;
    text-align: center;
    position:relative;
    z-index:3;
    width:calc(100% - 40px);
    margin: 20px;
    position: relative;
    border:1px solid #fff;
    border-radius:20px;
    background: linear-gradient(45deg, #0263ff, #6641d5, #020203, #2700a8);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
    overflow: hidden;
}

.h3 {
    font-size:3em;
    margin:0.5em 0;
    font-weight:400;
    text-align:center;
}

.block_subtitle p {
    font-size:1.4em;
}

.service_cards {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:1em;
    margin-top:6em;
}

.card_title {
    font-size:1.4em;
    margin:1em;
    min-height:2em;

}
.card_image img{
    width:70%;
}

.service_card {
    box-sizing: border-box;
    padding:20px 10px;
    border-radius:10px;
    border:1px solid #ffffff44;
    box-shadow:0 20px 30px rgba(0,0,0,0.2);
    background:linear-gradient(166deg, rgba(108,136,210,0.3) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 100%);
    /*background: linear-gradient(176deg, rgba(108,136,210,1) 0%, rgba(62,111,213,1) 7%, rgba(69,60,184,1) 27%, rgba(53,47,124,1) 100%);
    */
    }

/* CONTACT FORM */

.contact_form_block {
    width:calc(100% - 40px);
    margin:0 20px;
    border-radius:20px;
    background: linear-gradient(-45deg, #843bc4, #6641d5, #020203, #8f03a8);
	background-size: 200% 400%;
    animation: gradient 15s ease infinite; 
    overflow: hidden;
}

.contact_form_block .form_body{
    width:100%;
    max-width:480px;
    margin:0 auto;
}
.contact_form_block .form_body label {margin-bottom:16px;}

 .contact_form_block .form_body input, .contact_form_block .form_body textarea{
    display: block;
    width:100%;
    background:none;
    border:1px solid #ffffff55;
    border-radius:6px;
    padding:10px 10px;
    margin-top:6px;
    box-sizing: border-box;
    color:#fff;
    font-family:'Dosis';
}

.contact_form_block .form_body input[type=submit]{
    max-width:150px;
    margin:0 auto;
    background:none;
    border:1px solid #ffffff55;
    color:#fff;
    transition:0.3s;
    box-sizing: border-box;

}

.contact_form_block .form_body input[type=submit]:hover{
    background:#ffffff44;
    cursor:pointer;
}

.wpcf7-not-valid-tip {color:#fff;}

/* Footer */
footer {
    width:100%; 
    text-align:center;
    padding:20px;
    box-sizing: border-box;
    color:#191b88;
}


@media screen and (max-width:920px) {
    .hero {min-height:400px;}
    .hero_title { font-size:3em;}
    .hero_subtitle {font-size: 1.5em;}
    .service_cards {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width:480px) {
    
    .service_cards {
        grid-template-columns: 1fr;
    }
}