/*Content CSS*/
#main_vis { padding:0; display:block; position: relative; z-index: 5; width: 100%; height:100vh; min-height:900px; display: flex; align-items: center; justify-content: center; max-height: 1080px; background-color: #000; }
#main_vis::before {content: ''; display: block; width: 100%; height:100%; position: absolute; left:0 ;top:0; background-color: #000347; opacity: .25; z-index: 1;}
#main_vis .video_wrap {width: 100%; height: 100%; display: flex ;justify-content: center; align-items: center; position: absolute; left: 0; top:0;}
#main_vis .video_wrap video {width: 100%; height: 100%; object-fit: cover;}


/*main_typo*/
.main_typo_wrap {text-align: left; position: relative; z-index: 2; max-width: 1400px; padding:0 50px; width: 100%; top: -10px;}
.main_typo {position: relative; z-index: 1;}
.main_typo h2 {font-size: 70px; font-weight:700; color:#fff; line-height:95px; font-family: 'Montserrat'; }
.main_typo h2 span{font-size: 18px; font-weight: 500; line-height: 0; display: inline-block; margin-left: 10px;}
/* scroll_down */
#scroll_down a { position:absolute; left:100px; bottom:80px; z-index: 2;  animation:ani 1.4s infinite ease; cursor: pointer; font-size: 12px; font-weight: 300; color:#fff;
letter-spacing: 2.4px; }
@keyframes ani {
    0%{bottom:70px;}
    50%{bottom: 80px;}
    100% {bottom:70px;}
}

/* bottom */
#main_vis .bottom {max-width: 1400px; padding:0 50px; width: 100%; position: absolute; bottom: 100px;left: 50%;  transform: translateX(-50%);
display: flex; justify-content: space-between; align-items: flex-start; z-index: 5;}


/*progress*/
.cir_progress_wrap {display: block; position: relative; text-align: center;}
.cir_progress_wrap span{font-size: 16px; font-weight: 500; font-family: 'Montserrat'; display: block; margin-top: 13px; color: #fff;}
.cir_wrap{background: url('../img/scroll.png') 50% no-repeat;}
.cir_progress {
    transform: rotate(-90deg);
}
.cir_progress_value {
	stroke-dasharray: 339;
	stroke-dashoffset: 339;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-duration:5000ms;
    animation-name:progress;
}
.cir_progress_value.reset {stroke-dashoffset: 339; }
@keyframes progress {
	from {
		stroke-dashoffset: 339;
	}
	to {
		stroke-dashoffset: 0;
	}
}
.contact_btn{display: flex; align-items: center; justify-content: space-between; width: 500px; height: 120px; border-radius: 60px; box-shadow: 2.7px 4.2px 16px 0 rgba(0, 0, 0, 0.2); padding: 0 35px 0 50px; background-color: rgba(255,255,255,.1); position: relative; left: 60px;}
.contact_btn h6{font-size: 22px; font-weight: 500; color: #fff;}
.contact_btn span{font-size: 18px; font-weight: 300; color: rgba(255, 255, 255, 0.8); display: block; margin-top: 8px;}
.contact_btn i{width: 70px; height: 70px; background-color: #2a00ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .3s;}

@media screen and (min-width:1025px){
    .contact_btn:hover i{background-color: #000;}
}

@media screen and (max-width:1600px) {
    .contact_btn{left: 0;}
}

@media screen and (max-width:1280px) {
	#main_vis,
	#main_vis_slider .main_slide {min-height: auto; height:800px;}
    .main_typo h2{font-size: 65px; line-height: 1.2;}
    .contact_btn{width: initial; min-width: 350px; height: initial; padding: 15px 15px 15px 30px;}
    .contact_btn .text{margin-right: 50px;}
    .contact_btn h6{font-size: 19px;}
    .contact_btn span{font-size: 17px; margin-top: 5px;}
    .cir_progress_wrap span{margin-top: 9px;}
}

@media screen and (max-width: 1024px) {
    #main_vis,
	#main_vis_slider .main_slide { height: 700px;}

	.main_typo_wrap {padding:0 30px; text-align: center;}
    .main_typo h2 {font-size:52px;}
    .main_typo h2 span{margin-left: 0; font-size: 16px;}
    #main_vis .bottom{padding: 0 30px; bottom: 70px; justify-content: center;}
    .cir_progress_wrap {display: none;}

    #main_vis .contact_btn{}
    .contact_btn h6{font-size: 18px;}
    .contact_btn span{font-size: 14px;}
    .contact_btn i{width: 60px; height: 60px;}
}

@media screen and (max-width: 768px){
    .main_typo h2 {font-size:42px; line-height: 1.4;}
    #main_vis .bottom{bottom: 50px;}
    .contact_btn{width: 100%; min-width: 0; padding: 10px;}
    .contact_btn .text{padding-left: 15px;}
    .contact_btn h6{font-size: 16px;}
    .contact_btn span{font-size: 13px; margin-top: 3px;}
    .contact_btn i{width: 45px; height: 45px;}
    .contact_btn i img{width: 15px;}
}
@media screen and (max-width: 640px) {
	#main_vis,
	#main_vis_slider .main_slide {height: 600px;}
	.main_typo_wrap {padding:0 20px; position: relative;}
    .main_typo h2 span{position: absolute; top: -15px; display: block; left: 50%; transform: translateX(-50%);}
    #main_vis .bottom{padding: 0 20px;}
}

@media screen and (max-width: 480px){
    .main_typo h2 {font-size:30px;}
    .main_typo h2 span{ font-size: 14px;}
}