/* Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');

body {
	background:#14121d;
}

::selection {
	background:#ff002d;
	color:#ffffff;
}

/* Custom Scroll Bar*/
::-webkit-scrollbar {
    width: 0px;
}
 
/* BG of scroll bar */
::-webkit-scrollbar-track {
    -webkit-border-radius: none;
    border-radius: none;
}
 
/* Handle of sroll bar */
::-webkit-scrollbar-thumb {
	height:70px;
	background:#FF7300;
	border-radius:20px;
}

a, a:hover {
	text-decoration:none;
}

.static-text {
	color: #ffffff;
    font-size: 25px;
    padding: 0 8px;
    font-family: Poppins;
	letter-spacing:5px;
}

.changing-text{
    border-right: 2px solid red;
    font-size: 25px;
    font-family: Poppins;
    color: #ff002d;
	text-transform:uppercase;
	font-weight:700;
	letter-spacing:5px;
}

#overlay {
	position: relative; /* Sit on top of the page content */ 
	width: 100%; /* Full width (cover the whole page) */ 
	height: 100%; /* Full height (cover the whole page) */ 
	top: 0; 
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */ 
}

.hero-image {
	position:relative;
	height:100vh;
	background-image:url("https://images7.alphacoders.com/550/550739.jpg");
	background-position:center center;
	background-size:cover;
	background-attachment:fixed;
}

div.hero-text { 
	position:absolute;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
	width:100%;
}

h1 {
	font-family:poppins;
	margin:0 auto;
	font-size:18px;
	letter-spacing:0px;
	color:#ffffff;
	text-align:center;
	width:53rem;
	font-weight:500;
	padding:0;
	width:100%;
}

h2 {
	font-size:70px;
	font-family:poppins;
	font-weight:800;
	color:#ffffff;
	line-height:1.3em;
	width:100%;
	text-align:center;
	margin:2.5% 0;
}

h3 {
	margin:0 auto; 
	font-family:manrope;
	font-size:1.8vw;
	text-align:center;
	text-transform:uppercase;
	font-weight:400;
	width:70%;
	color:#FFFFFF;
	line-height:1em;
	padding:40px;
	width:100%;
	letter-spacing:50px;
}

div.about {
	/* position:relative; */
	height:5vh;
	background:#191723;
    display: flex;
    justify-content: center;
    align-items: center;
}

h5 {
	font-size:18px;
	line-height:0.9em;
	margin:3% 0;
	padding:0;
	text-align:left;
	font-weight:800;
	font-family:manrope;
	line-height:1.2em;
	color:#fff;
}

h4 {
	font-size:3vw;
	line-height:0.9em;
	margin:0;
	padding:7% 0 0 70px;
	text-transform:uppercase;
	text-align:left;
	font-weight:800;
	font-family:raleway;
	line-height:1.2em;
	color:#fff;
}

h4:after {
  background-color: #FF7300;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 30%;
}

h4:after {
  left: 0.5em;
  margin-right: -50%;
}

h6 {
	font-size:18px;
	line-height:0.9em;
	margin:3% 0;
	padding:0;
	text-align:left;
	font-weight:800;
	font-family:manrope;
	line-height:1.2em;
	color:#FF7300;
}

h7 {
	font-family:manrope;
	color:#FF7300;
	font-size:15px;
	margin:0;
	padding:7% 0 0 5%;
}

h8 {
	font-family:manrope;
	color:#fff;
	font-size:17px;
	line-height:1.8em;
	margin:2% 6%;
	display:block;
	width:80%;
	padding:0;
}

h9 {
	font-family:bebas neue;
	color:#fff;
	font-size:7vw;
	line-height:1em;
	margin:0;
	text-align:center;
	display:block;
	width:100%;
	padding:0;
}

p {
	font-family:manrope;
	text-align:left;
	font-size:14px;
	font-weight:400;
	margin:1% 0;
	color:#ffffff;
}

p1 {
	font-family:manrope;
	color:#FF7300;
	font-size:15px;
	margin:0;
	padding:0;
	text-align:center;
	display:block;
}

input.channel  {
	background:#ffffff;
	color:#232323;
	border:none;
	outline:none;
	font-family:manrope;
	text-transform:uppercase;
	font-size:13px;
	margin:0 auto;
	padding:20px 30px;
	transition:0.2s;
	display:block;
	width:20%;
	font-weight:bold;
	letter-spacing:2px;
	border-radius:30px;
}

input.channel:hover {
	background:#FF0000;
	color:#ffffff;
}

div.things {
	width:88%;
	margin:5% auto auto auto;
}

div.things .row {
	margin:5% auto;
}

div.things .row .col-lg-3 {
    width: 25%;
	padding:50px 0;
	border: 2px solid #14121d;
	transition:0.5s linear;
}

div.things .row .col-lg-3:hover {
    border: 2px solid #1f1b2f;
}

/* ------------------ For vedios sections --------------------- */

p.tag {
	color:#c62641;
	font-size:14px;
	font-weight:500;
	padding:0;
	font-family:domine;
	font-weight:bold;
	margin:0;
}
	
img.blog-image{
  width: 100%;
  object-fit:cover;
  filter:grayscale(0.5);
}

hr {
	background:#c62641;
	height:2px;
	width:7%;
	margin:0 auto;
}

section {
  padding:0;
  margin-top: 0;
  text-align: center;
}

.container {
  max-width: 100%;
  width: 95%;
  margin: 0 auto;
}

main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap:0 30px;
  margin:0;
  padding:10px;
}

header{
  width: 100%;
  margin: 0 auto;
  text-align:center;
}

.singleBlog {
	margin:0;
	transition: transform 0.4s;
	padding:20px;
	transition:0.3s linear;
}


/* ----------- Iframe Containers ----------------------------------- */

	.iframe-container {
		position:relative;
		width:99%;
		padding-bottom:55%;
	}
	
	.iframe-container iframe {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	
/* ----------- See All Button ----------------------------------- */
	#container {
		margin:2% auto;
	}
	
	button {
		position: relative;
		display: inline-block;
		cursor: pointer;
		outline: none;
		border: 0;
		vertical-align: middle;
		text-decoration: none;
		background: transparent;
		padding: 0;
		font-size: inherit;
		font-family: inherit;
		outline:none;
	}
	
	button.btn {
		width: 13rem;
		height: auto;
		outline:none;
	}
	
	button.btn .circle {
		transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
		position: relative;
		display: block;
		margin: 0;
		width: 3rem;
		height: 3rem;
		background: #FF7300;
		border-radius: 1.625rem;
		outline:none;
	}
	
	button.btn .circle .icon {
		transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		background: #fff;
		outline:none;
	}
	
	button.btn .circle .icon.arrow {
		transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
		left: 0.625rem;
		width: 1.125rem;
		height: 0.125rem;
		background: none;
		outline:none;
	}
	
	button.btn .circle .icon.arrow::before {
		position: absolute;
		content: '';
		top: -0.25rem;
		right: 0.0625rem;
		width: 0.625rem;
		height: 0.625rem;
		border-top: 0.125rem solid #fff;
		border-right: 0.125rem solid #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		outline:none;
	}
	
	button.btn .button-text {
		transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
		position: absolute;
		font-family:manrope;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0.75rem 0;
		margin: 0 0 0 0.85rem;
		color: #FF7300;
		font-weight: 700;
		line-height: 2.3;
		text-align: center;
		text-transform: uppercase;
		outline:none;
	}
	button:hover .circle {
		width: 100%;
		outline:none;
	}
	button:hover .circle .icon.arrow {
		background: #fff;
		-webkit-transform: translate(1rem, 0);
		transform: translate(1rem, 0);
		outline:none;
	}
	button:hover .button-text {
		color: #fff;
		outline:none;
	}

/* -----------------Services Cards---------------------------------- */

	div.services {
		width:88%;
		margin:0 5%;
	}

	div.services .row {
		margin:50px 0;
	}

	.card-body {
		background:#191723;
		padding:50px 30px;
	}

	.card {
      margin: 10px auto;
      box-shadow: 0px 2px 4px 0 rgba(0,0,0,0.2);
      height: 100%;
      transition: 0.3s;
	  border:1px solid #191723;
    }
	
	.card:hover {
		box-shadow: 1px 10px 16px 0 rgba(0,0,0,0.3);
		cursor:pointer;
		border:1px solid #FF7300;
	}
	
    .card-title {
		text-align: center;
		color: #fff;
		font-weight:300;
		font-size:18px;
    }



/* -----------------Social Icons---------------------------------- */
div.icon {
	text-align:left;
	width:50%;
	margin:2% 5%;
}

/* Wrapper */
.icon-button {
	background-color: #14121d;
	border-radius: 7.6rem;
	cursor: pointer;
	display: inline-block;
	font-size: 2.3rem;
	height: 7.6rem;
	width: 7.6rem;
	line-height: 2.6rem;
	margin: 0 5px;
	position: relative;
	text-align: center;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	border:1px solid #fff;
}

/* Circle */
.icon-button span {
	border-radius: 0;
	display: block;
	height: 0;
	left: 50%;
	margin: 0;
	position: absolute;
	top: 50%;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	     -o-transition: all 0.3s;
	        transition: all 0.3s;
	width: 0;
}
.icon-button:hover span {
	width: 7.6rem;
	height: 7.6rem;
	border-radius: 7.6rem;
	margin: -3.8rem;
}

/* Icons */
.icon-button i {
	background: none;
	color: white;
	height: 7.6rem;
	left: 0;
	line-height: 7.6rem;
	position: absolute;
	top: 0;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	     -o-transition: all 0.3s;
	        transition: all 0.3s;
	width: 7.6rem;
}

/* .twitter span { */
	/* background-color: #4099ff; */
/* } */

.facebook span {
	background-color: #3B5998;
}
.instagram span {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
}
.youtube span {
	background-color: #bb0000;
}

/* .icon-button .fa-twitter, */
.icon-button .fa-facebook,
.icon-button .fa-instagram,
.icon-button .fa-youtube{
	color: #fff;
}

/* .icon-button:hover .fa-twitter, */
.icon-button:hover .fa-facebook,
.icon-button:hover .fa-instagram,
.icon-button:hover .fa-youtube {
	color: white;
}

@keyframes bounceIn {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}



@media screen and (max-width: 680px) {
		
	div.icon {
		width:70%;
		margin:3% 6%;
		text-align:left;
	}

  .icon-button {
    border-radius: 3.6rem;
    font-size: 1.1rem;
    height: 3.6rem;
    line-height: 5.6rem;
    width: 3.6rem;
  }

  .icon-button:hover span {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 3.6rem;
    margin: -1.8rem;
  }

  /* Icons */
  .icon-button i {
	  height: 3.6rem;
	  line-height: 3.6rem;
	  width: 3.6rem;
	  left: 0px;
  }

}



@media screen and (max-width:768px) {
	
	
	h1 {
		font-size:2vw;
		margin:0 auto;
	}
	
	h2 {
		font-size:8vw;
	}
	
	h3 {
		font-size:5vw;
	}
	
	h4 {
		font-size:22px;	
		width:90%;
	}
	
	p {
		font-size:16px;
	}
	
	main {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 25px;
		padding:10px;
	}
	
	.singleBlog {
		margin:0;
		padding:0;
	}
	
	div.about h4 {
		margin:0;
		width:100%;
		font-size:18px;
	}
	
	input.channel  {
		font-size:10px;
		margin:0 auto;
		padding:15px 20px;
	}
}


@media screen and (max-width:500px) {
    
    #overlay {
    	background-color: rgba(0,0,0,0.3); /* Black background with opacity */ 
    }
	
	.static-text {
		font-size: 18px;
		padding: 0 6px;
		letter-spacing:2px;
		font-weight:500;
	}
	
	.changing-text {
		font-size: 18px;
		width:auto;
		letter-spacing:2px;
	}
	
	div.hero-image {
		height:100vh;
		background-image:url("https://img.freepik.com/free-photo/gradient-technology-background_23-2151895862.jpg?t=st=1756709292~exp=1756712892~hmac=330bcf3ad2a60c08b81fe82c6399a14e1048f37d4d77c00df79abbd00f4bf825&w=2000");
	}

	div.hero-text { 
		position:absolute;
		top:50%;
		left:50%;
		transform:translateX(-50%) translateY(-50%);
		width:100%;
	}
	
	div.about {
		height:2vh;
	}
	
	h1 {
		font-size:4vw;
		padding:0;
		line-height:2em;
		width:100%;
		margin:5% auto;
		letter-spacing:2px;
	}

	h2 {
		padding:0;
		letter-spacing:0.2px;
		line-height:0.9em;
		margin:10% 0;
		font-size:11vw;
		text-transform:none;
		line-height:3rem;
		width:100%;
		font-weight:800;
	}
	
	h3 {
		font-size:4vw;
		width:100%;
		padding:0;
		text-align:center;
		line-height:1.3em;
		letter-spacing:2vw;
	}
	
	h5 {
		font-size:16px;
		width:100%;
		font-weight:500;
		text-align:left;
	}
	
	h4 {
		font-size:6vw;
		margin:15% 0 0 5%;
		padding:0;
	}
	
	h4:after {
		width:30%;
		background:#fff;
		height:1px;
	}
	
	h6 {
		font-size:13px;
		font-weight:300;
	}
	
	h7 {
		font-size:13px;
	}
	
	h8 {
		font-size:13px;
		width:90%;
	}	
	
	h9 {
		font-size:12vw;
		width:100%;
	}
	
	.col-sm-3 {
		margin:8% auto;
	}
	
	p {
		font-size:13px;
	}
	
	p1 {
		font-size:12px;
	}
	
	input.channel  {
		font-size:10px;
		margin:10% auto;
		padding:12px 18px;
		width:auto;
		font-weight:none;
		background:#ffffff;
		border-radius:0;
		color:#232323;
		border:1px solid #ffffff;
	}
	
	.explore{
		font-size:3.3vw;
		padding:5px 16px;
		width:150px;
		margin:5% auto;
	}
	
	.explore:hover {
		background:none;
		color:#ffffff;
	}
	
	div.container {
		margin:0;
		padding:0;
		width:100%;
	}
	
	div.about {
		padding:20px 10px;
	}
	
	section {
		margin:0 0 0 0;
		padding: 0;
	}

    main {
      grid-template-columns: repeat(1, 1fr);
	  grid-gap:20px;
	  padding:0 10px;
    }
	
	.singleBlog {
		margin:0;
		padding:10px;
	}
	
	div.things .row {
		width:100%;
	}
	
	div.things .row div.col-xs-6 {
		margin:0 auto;
		padding:30px 0;
		width:50%;
	}
	
	div.services {
		width:92%;
		margin:-20px auto;
	}
	
	div.services .row div.col-xs-6 {
		width: 50%;
		padding:0 8px;
	}
	
	.card-body {
		padding:50px 10px;
	}

    .card-title {
		font-size:3.7vw;
    }
	
    .card-text{
		font-size:13px;
    }

}