@font-face {
   font-family: 'Font Awesome 5 Brands';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(https://www.webnexs.com/layout/css/fonts/fa-brands-400.woff2) format("woff2");
}

@font-face {
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
   src: url(https://www.webnexs.com/layout/css/fonts/fa-solid-900.woff2) format("woff2");
}

body{
   overflow-x: hidden;
}

.main{
   margin-top: 55px !important;
}

.sub-head h1,.sub-head p{
   color: #000;
   font-family: 'Josefin Sans', sans-serif;
}

.sub-head h1 {
   font-size: 42px !important;
   font-weight: 700;
   letter-spacing: 1px;
   line-height: 1.2;
}

.sub-head p {
   font-size: 19px;
   font-weight: 600;
   margin-top: 20px;
   line-height: 1.4;
   padding: 5px;
   width: 90%;
}

.sec-1 {
   padding: 40px;
   position: relative;
}

.sec-img-1,.sec-img-2,.sec-img-3,.sec-img-4,.sec-img-5,.arrow-img{
   position: absolute;
}

.sec-img-1,.sec-img-2,.sec-img-3,.sec-img-4,.sec-img-5{
   width: 80px;
}

.sec-img-1{
   top: 10%;
   left: 12%;
}

.sec-img-2{
   top: 36%;
   left: 15%;
}

.sec-img-3{
   top: 36%;
   left: 25%;
}

.sec-img-4{
   top: 37%;
   left: 77%;
}

.sec-img-5{
   top: 27%;
   left: 80%;
}

.arrow-img{
   top: 27%;
   left: 64%;
}

h1,h2,h3,h4,h5{
   font-family: 'Josefin Sans', sans-serif !important;
}

a.get-itt {
   font-size: 20px;
   color: #000 !important;
   background: #FFBC00;
   padding: 18px 35px;
   border: none;
   border-radius: 4px;
   font-weight: 700;
   width: 35%;
   margin: 1.825em 0;
   font-family: 'Josefin Sans', sans-serif;
   transition: 0.5s;
   cursor: pointer;
   text-align: center !important;
}

a.get-itt:hover {
   background: #FFBC00;
   color: #000000 !important;
   box-shadow: 0px 0px 45px rgba(0, 170, 255, 0.35);
}

.sec-2 h3,.sec-2 p{
   font-weight: bold;
   font-family: 'Josefin Sans', sans-serif;
}

.client-logo img {
   width: 8%;
   margin: 10px;
}

.sec-2 h3{
   margin-top: -50px !important;
}

.sec-2 p{
   font-size: 18px;
}

.sec-3 h2{
   margin-top: 30px;
   font-size: 32px;
   font-weight: 700;
   line-height: 1.25;
   text-align: left;
}

.sec-3 p{
   font-size: 19px;
   font-weight: 700;
   line-height: 55px;
   margin-bottom: 0;
   font-family: 'Josefin Sans', sans-serif;
}

.image-line{
   display: block;
   margin-top: -10px;
}

.case-study-btn{
   display: block;
   width: 50% !important;
   text-align: center;
   padding: 18px 35px;
}

.sec-4{
   background-color: #F9FBFF;
   background-image: url(../img/vod-platform/sec-4-img.webp);
    background-size: cover;
    background-repeat: no-repeat;
    
   margin-top: 27px;
}

.sec-4 h2, .sec-4 p{
   font-family: 'Josefin Sans', sans-serif;
}

.sec-4 h2{
   font-size: 32px;
   font-weight: 700;
   line-height: 1.4;
}
.megamenu{
    padding: 10px;
}

.sec-4 p{
   font-size: 18px;
   font-weight: 600;
   line-height: 1.4;
   width: 90%;
   margin: 0 auto 15px;
}

.sec-4-btn{
   display: inline-block;
   margin: 15px !important;
   width: 20% !important;
   padding: 18px 35px;
}

.section-4-img{
   margin-top: -30px !important;
}

.sec-5{
   background-color: #FBFBFB;
   padding: 50px;
   background-image: url('../img/vod-platform/mask_group.webp');
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
}

.sec-5-box{
   padding: 30px 5px;
   background: #FFFFFF;
   border-radius: 10px;
   margin: 10px auto;
   transition: 0.5s;
   cursor: pointer;
}
 
.sec-5-box:hover{
   box-shadow: 0px 0px 34px rgba(13, 94, 248, 0.3);
}

.sec-5 h3, .sec-5 p{
   font-family: 'Josefin Sans';
}

.sec-5 h3{
   font-size: 23px;
   font-weight: 700;
   line-height: 23px;
   background: linear-gradient(90deg, #0D5EF8 7.33%, #FF0000 82%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-top: 25px !important;
}

.sec-5 p{
   font-size: 18px;
   font-weight: 400;
   line-height: 1.4;
   width: 80%;
   margin: 0 !important;
   overflow: hidden;
}

.sec-5-btn{
   width: 70% !important;
   font-family: 'Josefin Sans';
   font-weight: 700;
   font-size: 1.25rem !important;
   padding: 1.125em 2.1875em;
   font-size: 1.375rem;
}

.sec-6{
   background-image: url('../img/vod-platform/sec-6-img.webp');
   color: #FFFFFF;
      background-size: cover;
    background-repeat: no-repeat;
}

.sec-6-btn{
   margin: 0 !important;
   width: 20% !important;
   text-align: center;
   padding: 1.125em 2.1875em;
   font-size: 1.375rem;
}

.sec-6 h3, .sec-7 h3, .sec-7 p{
   font-family: 'Josefin Sans';
}

.sec-6 h3{
   font-size: 30px;
   font-weight: 700;
   line-height: 1.4;
   margin-bottom: 20px;
}

.sec-7 h3{
   font-size: 28px;
   font-weight: 700;
   line-height: 1.25;
   letter-spacing: 0em;
   text-align: left;
}

.sec-7 p{
   font-size: 18px;
   font-weight: 600;
   line-height: 1.4;
   text-align: left;
   width: 90%;
}

.sec-7 img{
 
}

.sec-7{
   margin-bottom: 0 !important;
}

.sec-8{
   background: linear-gradient(#0003079a, #030a1683), url(../img/vod-platform/sec-8-img.webp);
   padding: 30px;
}

.sec-8 h2{
   font-family: 'Josefin Sans';
   font-style: normal;
   font-weight: 700;
   font-size: 28px;
   line-height: 1.4;
   color: #FFFFFF;
}

.sec-8-btn{
   width: 20% !important;
   display: block;
   margin: 0 auto !important;
   padding: 18px 35px;
}

.sec-9 h2, .sec-9 h3, .sec-9 p, .sec-9-btn{
   font-family: 'Josefin Sans';
}

.sec-9 h2{
   font-size: 30px;
   font-weight: 700;
   line-height: 1.2;
}

.sec-9 h3{
   font-weight: 700;
   font-size: 28px;
   line-height: 50px;
}

.sec-9 p{
   font-size: 17px;
   font-weight: 600;
   line-height: 1.4;
   margin: 0 0 5px !important;
}

.sec-9 img{
   width: 100%;
}

.sec-9-btn{
   border: 1px solid #FAB818;
   border-radius: 5px;
   font-style: normal;
   font-weight: 700;
   font-size: 20px;
   line-height: 30px;
   color: #000;
   padding: 18px 15px;
}

.sec-9-btn:hover{
   background-color: #FAB818;
   color: #000;
}

.sec-10{
   background-image: url(../img/vod-platform/sec-10-img.webp);
   padding: 5%;
   background-repeat: no-repeat;
   background-size: cover;
}

.sec-10 h3, .sec-10 p{
   font-family: 'Josefin Sans';
}

.sec-10 h3{
   font-size: 25px;
   font-weight: 700;
   line-height: 1.4;
   text-align: left;
   color: #FFFCFC;
   margin-bottom: 25px;
}

.sec-10-box{
   padding: 15px;
   border-radius: 10px;
   background: #00000052;
   margin-right: 30px;
}

.sec-10-box img{
   height: 50px;
   width: 50px;
   margin-bottom: 32px;
}

.sec-10-box p{
   margin-bottom: 0 !important;
   color: #FFFFFF;
}

.content {
   position: relative;
   margin: auto;
   overflow: hidden;
   margin: 10px;
}

.content hr{
   height: 2px;
   width: 80%;
   margin: 0 auto 20px;
   background-color: #FAB818;
}

.content-title{
   position: absolute;
   bottom: 20px;
   left: 50%;
   top: 50%;
   transform: translate(-50%,50%);
   font-family: 'Josefin Sans';
   font-size: 26px;
   font-weight: 700;
   line-height: 40px;
   color: #FFFFFF;
   width: 75%;
}

.content-title-1{
   color: #FFFFFF !important;
}

.content-details p{
   color: #FFFFFF !important;
}

.content img{
   border-radius: 10px;
}

.content .content-overlay {
   background: rgba(0, 0, 0, 1);
   position: absolute;
   width: 100%;
   left: 0;
   top: 0;
   bottom: 0;
   right: 0;
   opacity: 0;
   border-radius: 10px;
   -webkit-transition: all 0.4s ease-in-out 0s;
   -moz-transition: all 0.4s ease-in-out 0s;
   transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay {
   opacity: 1;
   border-radius: 10px;
   cursor: pointer;
}

.content-details {
   position: absolute;
   padding-left: 1em;
   padding-right: 1em;
   width: 100%;
   left: 50%;
   opacity: 0;
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   transform: translate(-50%, -40%);
   -webkit-transition: all 0.3s ease-in-out 0s;
   -moz-transition: all 0.3s ease-in-out 0s;
   transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details {
   top: 50%;
   left: 50%;
   opacity: 1;
   cursor: pointer;
}

.content-details h3 {
   color: #FFBC00;
   font-weight: 500;
   margin-bottom: .5em;
   text-transform: uppercase
}

.content-details p {
   color: #FFBC00;
   font-size: 16px;
   text-align: center;
}

.fadeIn-bottom {
   top: 80%;
}

.sec-11-div{
   margin-top: 65px;
   position: relative;
}

.sec-11 h2{
   font-family: 'Josefin Sans';
   font-size: 27px;
   font-weight: 700;
   line-height: 35px;
}

.sec-11-btn{
   font-size: 20px !important;
   line-height: 15px;
   padding: 25px 40px!important;
}

.slick-dots li button {
   margin-right: 0 !important;
}

.section-11-arrow-img{
   width: 10%;
   margin-top: -40px;
   position: absolute;
   top: 0%;
   right: 26%;
}

.sec-12{
   background: linear-gradient(#236ff259, #236ff260), url(../img/vod-platform/sec-8-img.webp);
   margin-top: 60px;
   padding: 30px !important;
}

.sec-13 h2, .sec-13 p{
   font-family: 'Josefin Sans';
}

.sec-13 h2{
   font-weight: 700;
   font-size: 28px;
   line-height: 55px;
   margin: 35px 0;
}

.sec-13-text-div{
   width: 45%;
   padding: 25px;
   position: relative;
   left: 6%;
}

.sec-13-btn{
   display: block;
  
}

.sec-13 p{
   font-weight: 600;
   font-size: 18px;
   line-height: 1.5;
}

.sec-13-img-div{
   text-align: right;
}

.sec-13 img{
   width: 80%;
}

.sec-14 h2{
   text-align: center;
   font-family: 'Josefin Sans';
   font-size: 30px;
   font-weight: 700;
   line-height: 45px;
   margin: 50px 0 20px !important;
}

.section-14-box img{
   width: 35%;
}

.section-14-box{
   background-color: #FBFBFB;
   padding: 50px;
   border-radius: 34px;
   width: 292px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
  margin: 15px 0 auto;
   transition: 0.5s;
   cursor: pointer;
}

.section-14-box:hover{
   box-shadow: 0px 0px 63px 4px rgba(13, 94, 248, 0.3);
}

.section-14-box h3{
   font-family: 'Josefin Sans';
   font-weight: 600;
   font-size: 18px;
   line-height: 22px;
   text-align: center;
   margin-top: 30px;
}

.container-fluid{
    padding: 0 25px;
}

.navbar-dark .navbar-toggler-icon{
    background-image:url('./layout/img/download.png')!important;
}

.dropdown-toggle::after{
    display: none;
}

.nav-item.dropdown{
   margin-right: 10px;
}

.list-unstyled .dropdown-item{
    padding-left: 0;
}

.logo-mar img {
    width: 100%;
}

.page-footer i{
   margin-left: 10px;
   font-size: 20px;
}

.navbar-dark .navbar-nav .nav-link{
    color: #000;
    font-weight: 600;
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{
    color: red;
     font-weight: 600;
}

.page-footer a{
    text-decoration: none;
    color: #000;
}

.page-footer li{
      padding: 0 0 10px 0;
}

a{
   text-decoration: none;
}

.dropdown-menu {
   position: absolute;
   top: 100%;
   z-index: 1000;
   display: none;
   min-width: 10rem;
   padding: 0.5rem 0;
   margin: 0;
   font-size: 1rem;
   color: #212529;
   text-align: left;
   list-style: none;
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid rgba(0,0,0,.15);
   border-radius: 0.25rem;
   max-width: 65%;
   margin: 0 auto;
}

.sec-14{
   margin-top: 60px !important;
}

@media (max-width: 600px){
    .section-14-box{
        width: auto;
    }
    .why{
        width: 100%!important;
    }
   .main{
      margin-top: 30px !important;
   }

   .sec-1{
      padding: 0;
   }

   .sec-1 p{
      width: 100% !important;
   }

   .get-itt{
      width: 75% !important;
      margin-top: 0 !important;
   }

   .sub-head h1{
      font-size: 1.75rem !important;
      width: 100%;
   }

   .sec-main-img{
      margin-bottom: 1em;
   }

   .sec-1 a{
      width: 100%;
      padding: 0.75em;
      font-size: 1em;
   }

   .sec-img-1{
      top: 16%;
      left: 2%;
   }
   
   .sec-img-2{
      top: 56%;
      left: 5%;
   }
   
   .sec-img-3{
      display: none;
   }
   
   .sec-img-4{
      display: none;
   }
   
   .sec-img-5{
      top: 57%;
      
   }
   
   .arrow-img{
      display: none;
   }

   .sub-head p{
      font-size: 19px;
   }

   .sec-main-img{
      margin-top: 5px;
       height: 100%;
       width: 100%;
   }
.client-logo img {
    width: 30%;
    margin: 10px;
}
   .sec-2 h3{
      margin-top: 0 !important;
   }

   .sec-3 h2{
      font-size: 1.5rem;
   }

   .sec-3 a{
      margin: 25px auto !important;
      font-size: 0.9rem;
   }

   .sec-3 h2{
      font-size: 22px;
      text-align: center;
      width: 100%;
   }

   .sec-3 img{
     
   }
    .sec-5 p{
        margin-bottom: 8px!important;
    }
   .case-study-btn{
      font-size: 1rem !important;
      width: 85% !important;
   }

   .sec-3-side-div{
      margin-bottom: -15px !important;
   } 

   .sec-4{
      padding: 0;
   }

   .sec-4 h2{
      margin-top: -40px !important;
      font-size: 1.8rem;
      padding: 0;
   }

   .sec-4-btn{
      font-size: 1rem !important;
      width: 50% !important;
   }

   .sec-4-logo{
      margin-top: -30px !important;
   }

   .sec-5-box a{
      width: 60% !important;
      font-size: 18px !important;
      margin-bottom: 0;
   }

   .sec-6{
      padding: 0;
       background-color: #091d48!important;
    background-image: none;
   }
    .sec-10{
         background-color: #1866f9!important;
    background-image: none;
        
    }

   .sec-6 h3{
      font-size: 1.4rem;
      line-height: 1.4;
   }

   .sec-6 a{
      width: 75% !important;
      font-size: 1rem !important;
   }

   .sec-7 p{
      width: 100%;
   }

   .sec-8 h2{
      font-size: 1.4rem;
   }

   .sec-8 a{
      width: 75% !important;
      font-size: 18px !important;
   }
   .sec-9 h2{
      font-size: 1.85rem;
      margin-bottom: -20px !important;
   }
   .sec-9 h3{
      font-size: 1.25rem;
      line-height: 1.6;
   }
   .sec-9 a{
      display: block;
      margin-bottom: 30px !important;
      width: 100%;
      font-size: 18px;
      text-align: center;
      padding: 0.5em;
   }

   .sec-9-div{
      margin-top: -150px !important;
   }

   .sec-10 h3{
      font-size: 1.4rem;
      text-align: center;
   }

   .sec-10 a{
      font-size: 1rem;
      display: block !important;
      margin: 0 auto !important;
   }

   .sec-10-box{
      margin-top: 20px;
   }

   .sec-13-text-div{
      width: 90% !important;
      padding: 0 !important;
   }

   .sec-13-img-div{
      text-align: center;
   }
   
   .sec-11-btn{
      width: 70% !important;
      font-size: 18px !important;
   }

   .section-11-arrow-img{
      display: none;
   }

   .sec-13 h2{
      font-size: 1.2rem;
      line-height: 1.5;
   }

   .sec-13-text-div{
      margin-top: -20px !important;
   }

   .sec-14{
      margin-left: 0;
   }

   .section-14-box{
      margin-right: 0;
   }

   .sec-14 h2{
      font-size: 1.1rem;
      margin: 20px 0 10px!important;
   }

   .sec-5{
      padding: 0;
       background-image: none;
   }

   .sec-5 h3{
      font-size: 1.25rem;
   }
}

@media (min-width:320px)  {  .dropdown-menu {max-width: 100%;}

} 

@media all and (min-width: 992px) {
	
	.navbar .has-megamenu{position:static!important;}
	.navbar .megamenu{left:0; right:0; width:100%; margin-top:0;  }
	
}

@media(max-width: 991px){
	.navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse{
		overflow-y: auto;
	    max-height: 90vh;
	    margin-top:10px;
	}
}

.fa-facebook-f, .fa-instagram, .fa-twitter, .fa-linkedin, .fa-youtube{
     height: 20px;
    width: 15px;
    margin: 0 5px;
}
.first-one{
    background: url('../img/vod-platform/101.png') no-repeat;
}