@import url("base.css");
@import url("hover.css");
@import url("animate.css");

/**************************************** start loader ****************************************/
.no-js #loader {display: none}

.js #loader {
left: 100px;
top: 0;
display: block;
position: absolute}

.loader {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 9999;
position: fixed;
background: url(../img/loader.svg) center no-repeat var(--white2);
background-size: 30% auto}
/**************************************** end loader ****************************************/

/**************************************** start bg efect ****************************************/
.bg_efect_1{
width: 100%;
height: 100%;
position: relative;
top: 0;
left: 0;
overflow: hidden}

.bg_efect_1 span{
width: 10px;
height: 10px;
position: absolute;
display: block;
list-style: none;
animation: bg_efect_1 20s linear infinite;
bottom: -150px}

.bg_efect_1 span:nth-child(1){
width: 25px;
height: 25px;
background:var(--purple);
left: 25%;
animation-delay: 0s}

.bg_efect_1 span:nth-child(2){
width: 30px;
height: 15px;
background:var(--blue);
left: 10%;
animation-delay: 2s;
animation-duration: 12s}

.bg_efect_1 span:nth-child(3){
width: 25px;
height: 25px;
border-radius: 50%;
background:var(--green);
left: 70%;
animation-delay: 4s}

.bg_efect_1 span:nth-child(4){
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid var(--red);
left: 40%;
animation-delay: 0s;
animation-duration: 18s}

.bg_efect_1 span:nth-child(5){
width: 25px;
height: 25px;
background:var(--orange);
left: 65%;
animation-delay: 0s}

.bg_efect_1 span:nth-child(6){
width: 30px;
height: 15px;
background:var(--yellow);
left: 75%;
animation-delay: 3s}

.bg_efect_1 span:nth-child(7){
width: 25px;
height: 25px;
border-radius: 50%;
background:var(--base);
left: 35%;
animation-delay: 7s}

.bg_efect_1 span:nth-child(8){
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid var(--black);
left: 50%;
animation-delay: 15s;
animation-duration: 45s}

.bg_efect_1 span:nth-child(9){
width: 25px;
height: 25px;
background:var(--purple);
left: 20%;
animation-delay: 2s;
animation-duration: 35s}

.bg_efect_1 span:nth-child(10){
width: 30px;
height: 15px;
background:var(--blue);
left: 85%;
animation-delay: 0s;
animation-duration: 11s}

@keyframes bg_efect_1 {
0% {transform: translateY(0) rotate(0deg);opacity: 0.3}
100% {transform: translateY(-1000px) rotate(720deg);opacity: 0}}
/**************************************** end bg efect ****************************************/
.block_slide {
width: 100%;
height: 100vh;
background: linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,.8)),url(../img/bg.jpg)center center fixed;
background-size: cover}

.block_slide_title{
display:block;
margin:0 auto;
padding-top:20%;
text-align:center;
font-size:30px;
font-weight:bold;
color:var(--white2)}

.block_slide_des {
display: block;
margin:3% auto;
text-align: center;
font-size: 25px;
color: var(--white2)}

.block_slide_btn {
width: fit-content;
display: block;
margin: 0 auto;
padding: 7px 2% 7px 2%;
text-align: center;
background-color: transparent;
color: var(--white2);
border: 2px solid var(--white2);
border-radius: var(--b_radius);
transition:border-color ease 0.5s;
cursor: pointer}

.block_slide_btn img {
width: 25px;
float: right;
margin-left: 10px}

.scrolldown {
width: 30px;
height: 50px;
left:0;
right:0;
bottom:20px;
position: absolute;
margin:0 auto; 
box-sizing: border-box;
border: 2px solid var(--white2);
border-radius: 50px;
text-align:center}

.scrolldown::before {
width: 5px;
height: 5px;
bottom: 30px;
left: 50%;
margin-left: -3px;
content: "";
position: absolute;
background-color:var(--white2);
border-radius: 100%;
animation: scrolldown-anim 2s infinite;
box-sizing: border-box;
box-shadow: 0px -5px 3px 1px var(--white2)}

@keyframes scrolldown-anim {
0% {opacity: 0;height: 6px}
40% {opacity: 1;height: 10px}
80% {transform: translate(0, 20px);height: 10px;opacity: 0}
100% {height: 3px;opacity: 0}}

.main_title{
margin: 2% auto 0px auto;
display:block;
font-size:18px;
font-weight:bold;
text-align:center}

.main_title_hr{margin: 0.5% auto 2% auto;display:block}

.block_main_service{
width:100%;
margin: 2% auto 2% auto;
display:block;
text-align:center}

.block_service{
width:30%;
height:auto;
margin:0px 1%;
padding:1%;
display:inline-block;
vertical-align:unset;
background-color:var(--white);
border-radius:var(--b_radius);
border:1px solid var(--white2);
text-align:center;
box-shadow:var(--box_shadow);
transition: all 0.5s linear}

.block_service:hover {border: 1px solid var(--base);box-shadow: unset}
.block_service img {width: 70px;transition: all 0.5s}
.block_service:hover img{filter: grayscale(100%)}

.block_service_title {
color: var(--base);
font-weight:bold;
margin:8px auto}

.block_social_media {
width: 100%;
background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),url(../img/social-media.jpg);
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
color:var(--white2);
margin:2% auto;
padding:5%;
display: block;
text-align:center}

.block_social_media h3{margin:4% auto}

.block_social_media_btn {
width:fit-content;
display: inline-block;
margin: 0 2%;
padding: 7px 2% 7px 2%;
direction: ltr;
text-align: center;
color: var(--white2);
border: 2px solid var(--white2);
border-radius: var(--b_radius);
transition:border-color ease 0.5s;
cursor: pointer}

.block_social_media_btn img {
width: 25px;
float: left;
margin-right: 10px}

.instagram {background: linear-gradient(115deg, rgb(249, 206, 52), rgb(238, 42, 123), rgb(98, 40, 215))}
.telegram {background: #0088cc}

.block_main_about_us{
width:100%;
margin: 2% auto 2% auto;
display:inline-block;
text-align:center}

.block_about_us_des {
width: 90%;
margin: 0 auto;
padding: 4%;
position: relative;
background: var(--white);
box-shadow: var(--box_shadow)}

.block_about_us_des:before, .block_about_us_des:after {
width: 100%;
height: 98%;
position: absolute;
content: "";
z-index: -1}

.block_about_us_des:before {
left: -5px;
top: 4px;
background: var(--white);
box-shadow: 0 0 8px rgba(0,0,0,0.2);
transform: rotate(-2.5deg)}

.block_about_us_des:after {
right: -3px;
top: 1px;
background: var(--white);
box-shadow: 0 0 3px rgba(0,0,0,0.2);
transform: rotate(1.4deg)}

.block_support {
width: 100%;
background: linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),url(../img/support.jpg);
background-position: 50% 0;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
color:var(--white2);
margin:2% auto;
padding:5%;
display: block;
text-align:center}

.block_support h3{margin:4% auto}

.accordion{
width:90%;
margin: 2% auto 2% auto;
display:block;
text-align:center}

.accordion_box {border-bottom: 1px solid var(--base)}
.accordion_box:last-child {border-bottom:none}
.accordion_title .accordion button{padding:1%}

.accordion #accordion_btn {
width: 100%;
position: relative;
display: block;
text-align: right;
padding: 1em 0;
color: var(--black);
border: none;
background: none}

.accordion #accordion_btn:hover, .accordion #accordion_btn:focus, .accordion #accordion_btn:hover::after, 
.accordion #accordion_btn:focus::after {cursor: pointer;color: var(--base)}

.accordion_icon {
display: inline-block;
position: absolute;
top: 18px;
left: 0;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 20px}

.accordion_icon::before {
display: block;
position: absolute;
content: '';
top: 9px;
left: 5px;
width: 10px;
height: 2px;
background: currentColor}

.accordion_icon::after {
display: block;
position: absolute;
content: '';
top: 5px;
left: 9px;
width: 2px;
height: 10px;
background: currentColor}

.accordion button[aria-expanded='true'] {color: var(--base)}
.accordion button[aria-expanded='true'] .accordion_icon::after {width: 0}

.accordion button[aria-expanded='true'] + .accordion_content {
opacity: 1;
max-height:400px;
transition: all 500ms linear;
will-change: opacity, max-height}

.accordion_content {
opacity: 0;
max-height: 0;
overflow: hidden;
-webkit-transition: opacity 400ms linear, max-height 500ms linear;
transition: opacity 500ms linear, max-height 500ms linear;
will-change: opacity, max-height}

.accordion_content p {margin-bottom:10px;text-align:right}

footer{
width: 100%;
background:var(--base);
background-attachment: fixed;
color:var(--white2);
margin-top:2%;
padding:2%;
display: block;
font-size:14px;
text-align:center}

footer a{color:var(--white2)!important}