/* Tech */
.section-title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title h2 {
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  font-size: 2.5rem;
/* color: #fff; */
font-family: 'Rubik', sans-serif;
}

.section-borders span {
  height: 5px;
  background: #46c0f0;
  width: 40px;
  display: inline-block;
  border-radius: 2px;
}

.section-borders span.black-border {
  background: #7f2274;
  width: 30px;
  margin: 0 6px;

}

a,
a:active,
a:focus {
    color: #6f6f6f;
    text-decoration: none;
    transition-timing-function: ease-in-out;
    -ms-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-duration: .2s;
    -ms-transition-duration: .2s;
    -moz-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
}

/* ul {
    margin: 0;
    padding: 0;
    list-style: none;
} */
img {
max-width: 100%;
height: auto;
}
section {
    padding: 60px 0;
   /* min-height: 100vh;*/
}

.sec-title-tech{
position:relative;
z-index: 1;
margin-bottom:60px;
}

.sec-title-tech .title{
position: relative;
display: block;
font-size: 18px;
line-height: 24px;
color: #ff2222;
font-weight: 500;
margin-bottom: 15px;
}

.sec-title-tech h2{
position: relative;
text-align: right;
display: block;
font-size:25px;
line-height: 1.28em;
color: #222222;
font-weight: 600;
padding-bottom:18px;
}

.sec-title-tech h2:before{
position:absolute;
content:'';
right:0px;
bottom:0px;
width:50px;
height:3px;
background-color:#d1d2d6;
}

.sec-title-tech .text{
position: relative;
font-size: 16px;
line-height: 26px;
color: #848484;
font-weight: 400;
margin-top: 35px;
}

.sec-title-tech.light h2{
color: #ffffff;
}

.sec-title-tech.text-center h2:before{
left:50%;
margin-left: -25px;
}

.list-style-one{
position:relative;
}

.list-style-one li{
position:relative;
font-size:16px;
line-height:26px;
color: #222222;
font-weight:400;
padding-left:35px;
margin-bottom: 12px;
}

.list-style-one li:before {
content: "\f058";
position: absolute;
left: 0;
top: 0px;
display: block;
font-size: 18px;
padding: 0px;
color: #ff2222;
font-weight: 600;
-moz-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1.6;
font-family: "Font Awesome 5 Free";
}

.list-style-one li a:hover{
color: #44bce2;
}

.btn-style-one{
  position: relative;
  display: inline-block;
  font-size: 17px;
  line-height: 30px;
  color: #ffffff;
  padding: 10px 30px;
  font-weight: 600;
  overflow: hidden;
  letter-spacing: 0.02em;
  background-color: #46c0f0;
  }
  
  .btn-style-one:hover{
  background-color: #6B7EB4;
  color: #ffffff;
  }



.blog {
  position: relative;
  width: 100%;
  padding: 45px 0 15px 0;
}

.blog .section-header p {
  font-size: 3rem;
  color: #000;
  font-family: 'Rubik', sans-serif;
  }
  
  
  .blog .section-header h2 {
    color: #7f2274;
    font-weight: 600;
    font-size: 20px;
    
    }

  .tech-section{
position: relative;
padding: 120px 0 70px;
}

.tech-section .sec-title{
margin-bottom: 45px;
}

.tech-section .content-column{
position: relative;
margin-bottom: 50px;
}

.tech-section .content-column .inner-column{
position: relative;
padding-left: 30px;
}

.tech-section .text{
    text-align: right;
    margin-top: -49px;
    font-size: 16px;
    line-height: 26px;
    color: #848484;
    font-weight: 400;
}

.tech-section .list-style-one{
margin-bottom: 45px;
}

.tech-section .btn-box{
position: relative;
}

.tech-section .btn-box a{
padding: 15px 50px;
}

.tech-section .image-column{
position: relative;
}

.tech-section .image-column .text-layer{
position: absolute;
right: -110px;
top: 50%;
font-size: 325px;
line-height: 1em;
color: #ffffff;
margin-top: -175px;
font-weight: 500;
}

.tech-section .image-column .inner-column{
position: relative;
padding-left: 120px;
padding-bottom: 125px;
}

.tech-section .image-column .inner-column:before{
position: absolute;
left: -75px;
top: 65px;
height: 100%;
width: 100%;
background-image:url(https://i.ibb.co/fxJ1jtC/about-circle-1.png);
content: "";
}

.tech-section .image-column .image-1{
position: relative;
}

.tech-section .image-column .image-2{
position: absolute;
left: 0;
bottom: 0;
}

.tech-section .image-column .image-2 img,
.tech-section .image-column .image-1 img{
box-shadow: 0 30px 50px rgba(8,13,62,.15);
}

.tech-section .image-column .video-link{
position: absolute;
left: 70px;
top: 170px;
}

.tech-section .image-column .video-link .link{
position: relative;
display: block;
font-size: 22px;
color: #191e34;
font-weight: 400;
text-align: center;
height: 100px;
width: 100px;
line-height: 100px;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 30px 50px rgba(8,13,62,.15);
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}







.box {
  padding: 47px;
  transition: 400ms all;
  cursor: pointer;
}
/* .box:hover {
  background-color: #ffffff;
  box-shadow: 0px 30px 60px 0 rgba(64, 72, 90, 0.15);
  transform: translateY(-20px);
}
.box:hover .box-img img {
  filter: grayscale(0);
}
.box .box-img {
  text-align: center;
}
.box .box-img img {
  filter: grayscale(1);
  max-width: 100%;
  transition: 400ms all;
} */
.box .box-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #40485a;
  margin-top: 45px;
}
.box .box-description {
  font-size: 18px;
  letter-spacing: normal;
  line-height: 1.5;
  text-align: center;
  color: #6a707d;
  margin-top: 21px;
}


.video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-color: rgba(255, 122, 0, 0.1);
  display:flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}

.video-container .close {
  position: absolute;
  top: 10%;
  right: 25px;
  font-size: 20px;
  cursor: pointer;
}

.video-container video{
  width: 90%;
  max-width: 800px;
  transform: scale(0);
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
  outline: none;
  transition: all 0.3s;
}

.video-container .show{
  pointer-events: all;
  opacity:1;
}

.video-container .show video {
  transform: scale(1);
}



      /* To make a YouTube video responsive, add the following code to your Primary CSS file or the stylesheet being applied to your site:
 */
/* YouTube Responsive CSS for HubSpot */

.youtube-player 
{
position: relative;
padding-bottom: 30%;
padding-top: 28%;
width: 100%;
height: 100%;
}

.youtube-player-two 
{
position: relative;
padding-bottom: 30%;
padding-top: 28%;
width: 100%;
height: 100%;
}

/* This code will apply to YouTube videos added through the content editor's embed media function.
 Once you have added this code, copy the share URL of the YouTube video in question.
  Navigate to the Blog, Landing Page, or Site Page editor.
*/

.button-44 {
  align-items: center;
  background-color: #FFFFFF;
  /* border: 1px solid #DFDFDF; */
  border-radius: 16px;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  display: flex;
  font-family: sans-serif;
  font-size: 18px;
  font-weight: 700;
  justify-content: center;
  line-height: 28px;
  max-width: 100%;
  padding: 14px 22px;
  text-decoration: none;
  transition: all .2s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
  font-family: 'Rubik', sans-serif;
}

/* .button-44:active,
.button-44:hover {
  outline: 0;
} */

/* .button-44:hover {
  background-color: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.19);
} */

@media (min-width: 768px) {
  .button-44 {
    font-size: 20px;
    min-width: 200px;
    padding: 14px 16px;
  }
}

/* .youtube-player {
  position: relative;
  width: 640px;
  height: 400px;
  margin: auto;
  cursor: pointer;
} */

.youtube-player .youtube-player-two {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Adjust as needed */
  cursor: pointer;
}


.youtube-player img {
  width: 100%;
}

.youtube-player-two img {
  width: 100%;
}


.youtube-player.pristine::before {
  content: '';
  position: absolute;
  top: 44%;
    left: 55%;
  margin-top: -15px;
  margin-left: -55px;
  height: 0;
  width: 0;
  border-left: 50px solid #46c0f0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  transition: opacity .2s ease;
}
.youtube-player-two.pristine:hover::before {
  opacity: .7;
}

.youtube-player-two.pristine::before {
  content: '';
  position: absolute;
  top: 44%;
    left: 55%;
  margin-top: -15px;
  margin-left: -55px;
  height: 0;
  width: 0;
  border-left: 50px solid #46c0f0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  transition: opacity .2s ease;
}

.youtube-player.pristine:hover::before {
  opacity: .7;
}

 /* Adjust styles for smaller screens */
 @media only screen and (max-width: 768px) {
  .youtube-player {
    height: auto; /* Set height to auto for smaller screens */
  }

  .youtube-player-two {
    height: auto; /* Set height to auto for smaller screens */
  }
}