/**
 * Theme Name:     Twenty Twenty-One Child
 * Author:         the WordPress team
 * Template:       twentytwentyone
 * Text Domain:	   twenty-twenty-one-child
 * Description:    Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
 */


		body{
			background: #000!important;
			color: #fff!important;
		}
		.container-fluid{
			max-width: 2200px!important;
		}
		@font-face {
			    font-family: "Techead-Black";
			    src: url("Techead/Techead-Black.otf");
			}
			@font-face {
			    font-family: "Techead";
			    src: url("Techead/Techead.otf");
			}
				@font-face {
			    font-family: "Techead-Bold";
			    src: url("Techead/Techead-Bold.otf");
			}
		h1,h2,h3,h4,h5,h6{
			font-family: Techead-Bold!important;
		}
		p,a{
			 font-family: "Roboto", sans-serif;
		}
		 .techead_font{
            font-family: Techead!important;
            font-size: 1.1vw;
        }
		.get_btn{
			background: linear-gradient(90deg, rgba(114,134,255,1) 0%, rgba(138,181,67,1) 100%);
			padding: 2.5px 2.5px;
			border-radius: 35px;
		}
		.get_btn1{
			background: #000;
    		border-radius: 35px;
    		border-radius: 35px;
    		padding: 13px 50px 13px;
    		font-size: 1.2vw;

		}
		.get_btn2{
			background: linear-gradient(90deg, rgba(114,134,255,1) 0%, rgba(138,181,67,1) 100%);
			padding: 2.5px 2px;
			border-radius: 50px;
		}

		.get_btn3{
			background:#000;
			border-radius: 50px;
			padding: 15px;

		}



 

ul.cards-split{
  width: 96%; 
  height: 23vw;
  list-style-type: none;
  position: relative;
  margin: 0 auto 20px;
  padding: 20px;
  cursor: pointer;
  li.title{ margin: 0 0 20px;
    h2{ font-weight: 700; }
  }
  li.card{
            background-color: #0000;
        background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%; overflow: hidden;
    height: 23vw; width: 19vw;
    border-radius: 0px;
    position: absolute; left: 39%;
    transition: all 0.4s cubic-bezier(.63,.15,.03,1.12);
    img{
       max-width: 100%; height: auto; 
    }
    div.content{
      padding: 5px 10px;
      h1{
        
      }
      p{
        
      }
    }
    
    &.card-1{ 
      z-index: 10; transform: rotateZ(-2deg);
    }
    &.card-2{ 
      z-index: 9; transform: rotateZ(-7deg);
      transition-delay: 0.05s;
    }
    &.card-3{ 
      z-index: 8; transform: rotateZ(5deg);
      transition-delay: 0.1s;
    }
     &.card-3{ 
      z-index: 7; transform: rotateZ(7deg);
      transition-delay: 0.1s;
    }
  }
  
  &.transition{
    li.card{
      transform: rotateZ(0deg);
      &.card-1{
        left: 0px;
        transform: rotateZ(-5deg);
      }

      &.card-2{
        left: 20vw;
       transform: rotateZ(5deg);
      }

      &.card-3{
        left: 40vw;
       transform: rotateZ(-5deg);
      }
      &.card-4{
        left: 60vw;
        transform: rotateZ(5deg);
      }
    }
  }
}




.what_text{
	font-size: 5.5vw;
	font-weight: 700;
}
.human_text{
	font-size: 3.4vw;
	font-family: "Techead";
}
/*.we_text{*/
/*	font-size: 2.5vw;*/
/*}*/
p, p1{
	font-size: 1.5vw;
}
.marquee_text{
	font-size: 2.5vw!important;
	font-family: "Techead";
	line-height: 1.6;
}
input::placeholder {
	color:#808080!important;
	font-size: 1.1vw!important;
}
.form-control:focus {
    background-color: #000!important;
    color: #808080!important;

}
.button12 {
    background: transparent;
    border: 0;
}
.what_text1{
	font-size: 6.5vw;
}
.section1_padding {
    padding: 10% 0 8%;
}
.sections_padding {
    padding: 0 4%;
}
.linear_text{

  background: linear-gradient(to right, #4275B9 0%, #66CD55 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=date], input[type=month], input[type=week], input[type=time], input[type=datetime], input[type=datetime-local], input[type=color], .site textarea {
    border: 0;
    border-radius: 50px!important;
    margin: 0!important;
}
button.button12 {
    padding: 0;
    background: transparent;
    position: relative;
}
button:not(:hover):not(:active):not(.has-background){
	    background-color: transparent!important;
}
button {
    padding: 0!important;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner {
    padding: 0;
    border: 0;
    background: transparent !important;
}
.wpcf7-not-valid-tip {
    display: none;
}
.button12 img{
	position: absolute;
	left: 10px;
	top: 15px;
}
input.wpcf7-form-control.wpcf7-submit.has-spinner {
    color: #000 !important;
}

.copy_right{
    font-size:1.2vw;
}
.marque_span_text{
    background: linear-gradient(90deg, rgba(114,134,255,1) 0%, rgba(138,181,67,1) 100%);padding: 2px 2px 6px;border-radius: 35px;
}

.marque_span_text1{
    background:#000;border-radius:35px;padding:0 20px 4px;
}
.counter-slider1 .owl-item {
    width: auto !important;
}
.counter-slider1 .owl-stage {
    display: flex;
    justify-content: center;
    align-items: center;
}
.counter-slider2 .owl-item {
    width: auto !important;
}
.counter-slider2 .owl-stage {
    display: flex;
    justify-content: center;
    align-items: center;
}

p1 {
  position: relative;
}

p1 span:nth-child(2) {
  position: absolute;
  top: 0;
  left: 25px;
  opacity: 0;
}

p1 span {
  transition: all 3s ease-in-out;
}
.header_bg{
    background-size: cover;
    background-position: 52px center;
    background-repeat: no-repeat;
}
video.fullscreen {
  position: absolute;
  z-index: 0;
  object-fit: cover;
  width:100%;
  height:100%;
  top: 50%;
  left: 52.8%;
  transform: translate(-50%, -50%);
  overflow:hidden;

  &::-webkit-media-controls {
     display:none !important;
  }
}

.container {
   position: relative;
   display: grid;
   place-items: center;
   height: 70vh;
   width: 70vw;
   margin: 0 auto;
   background: #ccc;
}

.content {
  z-index: 1;
}

.text-padding{
    font-size: 1vw;
    padding-top: 38%;

}
.counter-slider1 .owl-item {
    width: auto !important;
}
.counter-slider1 .owl-stage {
    display: flex;
    justify-content: center;
    align-items: center;
}
.counter-slider2 .owl-item {
    width: auto !important;
}
.counter-slider2 .owl-stage {
    display: flex;
    justify-content: center;
    align-items: center;
}
.header_bg{
    background-size: cover;
    background-position: 40px center;
    background-repeat: no-repeat;
}


@media screen and (min-width: 2200px) {
	.human_text {
    font-size: 80px;
}
p, .copy_right, p1 {
    font-size: 35px;
}
.what_text {
    font-size: 123px;
}
/*.we_text {*/
/*    font-size: 58px;*/
/*}*/
.marquee_text {
    font-size: 65px !important;
    font-family: "Techead";
}
.what_text1 {
    font-size: 150px;
}
input::placeholder {
	font-size: 25px!important;
}
.get_btn1 {
    font-size: 28px;
}
ul.cards-split {
    height: 600px;

}
    li.card {
        height:550px;
        width: 400px;
    }
    ul.cards-split {
    &.transition {
        & li.card {
            &.card-2 {
                left: 430px;
          
            }
            &.card-3 {
                left: 875px;
           
            }
            &.card-4 {
                left: 1300px;
              
            }
        }
    }
}
h5.techead_font {
    font-size: 26px;
}
p.text-padding {
    font-size: 23px;
}
}
@media screen and (max-width: 1120px) {
.what_text1 {
    font-size: 6vw;
}
.sections_padding {
    padding: 0 0%;
}
}
@media screen and (max-width: 1200px) {
.content {
    padding: 10px !important;
}
}
@media screen and (max-width: 768px) {

.start_line{
	display: none;
}
.sections_padding {
    padding: 0 4%;
}
.navbar-brand img{
	width: 145px;
}
.get_btn1 {
    padding: 4px 20px 5px;
    font-size: 12px;
}
.human_text {
    font-size: 30px;
}
p, p1{
    font-size: 15px;
}
.what_text {
    font-size: 35px;
}
/*.we_text {*/
/*    font-size: 18px;*/
/*}*/
.marquee_text {
    font-size: 15px !important;
}
ul.cards-split {
    li.card {
        height: auto;
        width: auto;
        left: auto;
        position: initial;

    }
}
ul.cards-split {
    height: auto;

}
input::placeholder {
	font-size: 15px!important;
}
.get_btn2 {
    margin-bottom: 20px;
}
.what_text1 {
    font-size: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.social_links{
	justify-content: center!important;
}
marquee img{
	width: 15px;
}
.copy_right {
    font-size: 16px;
    text-align: center;
}
.marque_span_text{
    background: linear-gradient(90deg, rgba(114,134,255,1) 0%, rgba(138,181,67,1) 100%);padding: 2px 2px 2px;border-radius: 35px;
}

.marque_span_text1{
    background:#000;border-radius:35px;padding:0 10px 0px;
}
.counter-slider1 .owl-item {
    width: auto !important;
}
.counter-slider1 .owl-stage {
    display: flex;
    justify-content: center;
    align-items: center;
}
.counter-slider2 .owl-item {
    width: auto !important;
}
.counter-slider2 .owl-stage {
    display: flex;
    justify-content: center;
    align-items: center;
}
    .counter-slider3 .item {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height:400px;
    width: 300px;
}
h5.techead_font {
    font-size: 22px;
    text-align: left;
}
p.text-padding {
    font-size: 18px;
    text-align: left;
}

h5.techead_font {
    font-size: 22px;
    text-align: left;
}
p.text-padding {
    font-size: 18px;
    text-align: left;
}
li.card {
    background-color: #0000 !important;
}
h5.techead_font {
    font-size: 16px;
    text-align: left;
}
p.text-padding {
    font-size: 14px;
    text-align: left;
}
    .counter-slider3 .item {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height:330px;
    width: 250px;
}
}
@media screen and (max-width: 395px) {



h5.techead_font {
    font-size: 16px;
    text-align: left;
}
p.text-padding {
    font-size: 14px;
    text-align: left;
}

}
@media screen and (max-width: 350px) {


    .counter-slider3 .item {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height:300px;
    width: 220px;
}
h5.techead_font {
    font-size: 14px;
    text-align: left;
}
p.text-padding {
    font-size: 12px;
    text-align: left;
}

}
@media screen and (max-width: 346px) {

.get_btn1 {
        padding: 3px 12px 3px;
        font-size: 10px;
    }
    p, p1, .copy_right {
    font-size: 12px!important;
}

}
@media screen and (max-width: 295px) {

.navbar-brand img {
        width: 100px;
    }
p, p1, .copy_right {
    font-size: 10px;
}
    .counter-slider3 .item {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height:280px;
    width: 200px;
}
h5.techead_font {
    font-size: 14px;
    text-align: left;
}
p.text-padding {
    font-size: 12px;
    text-align: left;
}

}
@media screen and (max-width: 285px) {

p, p1, .copy_right {
    font-size: 11px!important;
}
}

@media screen and (max-width: 261px) {

p, p1, .copy_right {
    font-size: 10px!important;
}
}