@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*============ GENERAL STYLE ==========================*/
  /*========== ROOT & GENERAL STYLE ===================*/
    :root{
      --color-first:#7894FF;
      --color-second:#F82B60;
      --color-third:#17203f;
      --color-content: #101010;
      --color-light-first:#008009;
      --bg-1:#f9f9f9;
      --bg-2:#ffdde6;
      --bg-3:#e3e9ff;
      --bg-4:#ffd2de;
      --font-family-heading:"Noto Serif Display", serif;
      --font-family:'Poppins', sans-serif;
      --shadow: 0 1px 2px 0 rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.13);
    }
    *, ::after, ::before{box-sizing: border-box;}
    * {
      margin: 0; 
      padding: 0;
      font-family: var(--font-family);
      font-weight: 300;
      font-style: normal;
      font-size: 16px;
      letter-spacing: 0.01em;
      line-height: 1.5;
      color: var(--color-first);
      text-transform: none;
    }
    a, a:hover, a:focus, a:focus-visible { text-decoration: none; outline:none;color: var(--color-third);}
    html {
      scroll-behavior: smooth;
      font-family: sans-serif;
    }
    body{margin-top: 65px;background: #fff;}
    img {
      object-fit: cover;
      object-position: center;
    }
    .pad-top{padding-top: 50px}  
    ul li { list-style: none; }
    ul.point-list  li,ul.list li { list-style:disc;color:var(--color-content);}
    ul.list li strong{ font-weight:600; color: var(--color-content);}
    .box-shadow{ box-shadow: 0 1px 2px 0 rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.13);} 
  /*========== BUTTON STYLE ==========================*/
    .button,input[type="submit"].button,.btn-outline-first,.btn-outline-second,.btn-outline-third{
      border: 0;
      padding:6px 14px;
      color: #fff;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0;
      line-height: 1.2;
      border-radius:2rem;
      border: 1px solid transparent;
      text-transform: capitalize;
      font-family: var(--font-family-heading); 
      font-style: italic;
    }
    .button.btn-first,.bg-first,input[type="submit"].button.btn-first,.button.btn-first:hover{ 
      background:var(--color-first);
      border-color: var(--color-first);
    }
    .button.btn-second,.bg-second,input[type="submit"].button.btn-second,.button.btn-second:hover{ 
      background: var(--color-second); 
      border-color: var(--color-second);
    }
    .button.btn-third,.bg-third,input[type="submit"].button.btn-third,.button.btn-third:hover{ 
      background: var(--color-third); 
      border-color: var(--color-third);
    }
    .button i,.button:hover { color: #fff; }  
    .btn-outline-first,.btn-outline-second,.btn-outline-third{
      font-weight: 500;
      background: var(--bg-2);
    }
    .btn-outline-first,.btn-outline-second:hover{
      color: var(--color-first);
      border-color: var(--color-first);
    }
    .btn-outline-second,.btn-outline-first:hover{
      color: var(--color-second);
      border-color: var(--color-second);
    }
    .btn-outline-third,.btn-outline-third:hover{
      color: var(--color-third);
      border-color: var(--color-third);
    }
    button.button:focus,button.btn:focus,input.form-control:focus,select.form-select:focus,textarea:focus {
      outline: 0 !important;
      box-shadow: none !important;
    }
  /*========== HEADING STYLE =========================*/
    .webContent .mainHeading{    
      font-size:3rem;
      font-weight:500;
      line-height:1.2;
      letter-spacing: -2px;
      text-transform: capitalize;
      color:var(--color-first);
      font-family: var(--font-family); 
    }
    .webContent .mainHeading mark{
      font-size: 2.5rem;
      font-weight:600;
      background: var(--color-second);
      font-family: var(--font-family-heading);
      font-style: italic;
      color: #fff;
      text-transform: capitalize;
      padding: 0 .1875em 7px;
    }
    .webContent .subHeading {
      font-size: 1.3rem;
      color: var(--color-second);
      letter-spacing: 0.5px;
      font-weight: 500;
    }
    .webContent p {
      font-weight: 400;
      color: var(--color-third);
      white-space: pre-line;
      font-size: 1rem;
      line-height: 1.6;
    }
    .webContent .mainHeading.largeHeading { font-size: 3.5rem;}
    .webContent .subHeading.largeHeading { font-size: 1.6rem;}
    .webContent p.largeHeading { font-size: 1.3rem;}
    .webContent .line{
      width: 100px;
      margin-bottom: 5px;
      height: 1.5px;
      background: var(--color-first);
    }
    .webContent .smallHeading {
      font-size: 1.2rem;
      color: var(--color-first);
      letter-spacing: 0.5px;
      font-weight: 600;
      text-transform: capitalize;
    }
  /*========== COLOR AND BORDER COLOR STYLE =====================*/   
    .bg-1{background-color: var(--bg-1);} 
    .bg-2{background-color: var(--bg-2);}     
    .bg-3{background-color: var(--bg-3);} 
    .bg-4{background-color: var(--bg-4);}     
    .color-first,.color-first:hover,.button i.color-first, .webContent .mainHeading.color-first,
    .webContent .subHeading.color-first,.webContent p.color-first{color: var(--color-first);}
    .color-second,.color-second:hover,.button i.color-second, .webContent .mainHeading.color-second,
    .webContent .subHeading.color-second,.webContent p.color-second{ color: var(--color-second)}
    .color-third,.color-third:hover,.button i.color-third, .webContent .mainHeading.color-third,
    .webContent .subHeading.color-third,.webContent p.color-third,
    .webContent .smallHeading.color-third{color:var(--color-third);}
    .border-first{border-color: var(--color-first);}
    .border-second{ border-color: var(--color-second)}
    .border-third{border-color:var(--color-third);}
  /*========== FONT STYLE STYLE =====================*/    
    .font-family-first{font-family: var(--font-family-heading); font-style: italic;}
    .font-family-second{font-family: var(--font-family);}
  /*========== INPUT FIELD STYLE =====================*/  
    input.form-control, select.form-select{ height: 40px; border-radius: 0;font-size: 0.85rem}
    input.form-control,input.form-control:focus,select.form-select,select.form-select:focus,
    textarea.form-control,textarea.form-control:focus { background-color: #fff; }
    textarea.form-control { resize: none; border-radius: 0; }
    .form-check-input {width: 1.5em;height: 1.5em;}
    .form-check-input:checked { background-color: var(--color-first);border-color:var(--color-first); }
    label strong{ font-size: 1rem; font-weight: 500; }
    .form-check-input:focus{box-shadow:none}
    /*.h-45{ height: 45px; }*/
    .form-control.is-valid, .was-validated .form-control:valid,.form-select.is-valid, .was-validated .form-select:valid,
    .form-control.is-invalid, .was-validated .form-control:invalid,.form-select.is-invalid, .was-validated .form-select:invalid {background: transparent;}
    .martop{margin-top: 65px}
  /*========== TEXT LIMIT STYLE ======================*/
    .text-limit-1,.text-limit-2,.text-limit-3,.text-limit-4{
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .text-limit-1{ -webkit-line-clamp: 1; }
    .text-limit-2{ -webkit-line-clamp: 2; }
    .text-limit-3{ -webkit-line-clamp: 3; }
    .text-limit-4{ -webkit-line-clamp: 4; }
  /* ================= CARD ANIMATION SECTION ================*/    
    .animateCard,.get-started .divider{
      border-color: rgba(0, 0, 0, 0.1);
      position: relative;
    }
    .animateCard::before,.animateCard::after{
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      transition: all 0.6s linear;
    }
    .animateCard::before{
      left: 0;
      bottom: 0;
      border-bottom: 1px solid transparent;
      border-left: 1px solid transparent;
    }
    .animateCard::after{
      right: 0;
      top: 0;
      border-top: 1px solid transparent;
      border-right: 1px solid transparent;
    }
    .animateCard:hover::before,.animateCard:hover::after{
      border-color: #1d1d1d;
      width: 100%;
      height: 100%;
    }
    .animateCard:hover{ border-color: transparent;  }
  /*========== OWL CAROUSEL STYLE ====================*/
    .owl-theme .owl-nav [class*=owl-] { margin: 0!important }
    .owl-carousel .owl-nav button span {
      opacity: 0;
      width: 0;
      height: 0
    }
    .owl-carousel .owl-nav button:focus {
      outline: 0!important;
      border: 0!important
    }
    .owl-carousel .owl-nav button.owl-next::after,.owl-carousel .owl-nav button.owl-prev::after {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      top: 10px;
      right: 5px;
      bottom: 5px;
      left: 20px;
      transform: rotate(45deg);
      border-radius: 0;
      border: 2px solid #fff;
      border-left: 0;
      border-bottom: 0;
      margin-left: -9px;
      margin-bottom: 2px
    }
    .owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev {
      width: 35px;
      height: 35px;
      background: var(--color-second) !important;
      position: absolute;
      border-radius: 50%;
      box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.6);
      top: 45%
    }
    .owl-carousel .owl-nav button.owl-prev {transform: rotate(180deg)}
    .owl-theme .owl-nav .owl-prev {
      right: initial;
      left: -1%;
    }
    .owl-theme .owl-nav .owl-next { right: -1%; }
/*============ BANNER STYLE ==========================*/
  .main-banner{background-color: #fcfcfd;}
  .largeButton.btn-outline-third{
    background: var(--color-third); 
    color: #fff;
    padding: 10px 40px;
    font-size: 1.3rem;
  }
/*============ ABOUT STYLE ==========================*/  
  .team-card img{
    width: 200px;
    height: 200px;
    border: 5px solid var(--color-second);
  }
  .vision-mission-section{
    background: linear-gradient(90deg,rgba(23, 32, 63, 0.8), rgba(23, 32, 63, 0.8)), url(../img/about/mission.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }
  .vision-mission-section .card{border-color: #fff}
/*============ BLOG STYLE ==========================*/   
  .blog-card::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 5%;
    top: 5%;
    background: var(--bg-2);
    border-radius: 10px;
    z-index: -1;
    transition: 0.3s ease;
  }
  .main-solution-section .blog-card::after{top: 10%}
  .blog-card:hover::after{ top: 0; left: 0; }
  .blog-card img{height: 250px;}
/*============ CASE STUDIES STYLE ==========================*/ 
  .case-studies-card .case-studies-img{width: 150px;height: 150px;display:inline-block;margin: 10px 0;
    position: relative;z-index: 2;}    
  .case-studies-card .case-studies-img:before{
    position: absolute;
    content: '';
    background: var(--color-first);
    width: 100%;
    height: 100%;
    left: -5%;
    top: 0%;
    border-radius: 50%;
    z-index: -1;
  }
  .case-studies-card.brand-card .case-studies-img:before{left: 0%;background: #fff;}
  .case-studies-card img{
    height: 100%;
    border-radius: 50%;
    object-fit: scale-down;
    position: relative;
    z-index: 2;
  }
   .brand-card.case-studies-card img{
    width: 100px !important;
    margin: 0 auto;   
    height: 100%;
    border-radius: 50%;
    object-fit: scale-down;
    position: relative;
    z-index: 2;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */   
  }
  .brand-card.case-studies-card img:hover{
    filter: none;
    -webkit-filter: grayscale(0%);
  }
/*============ GET IN TOUCH STYLE ==========================*/   
  .get-in-touch-bg{
    background: url(../img/get-in-touch-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }
  .get-in-touch-bg .mainHeading{font-weight: 700;font-size:2.8rem}
  a.get-in-touch-button {
    position: relative;
    padding: 20px;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 4px;
    overflow: hidden;
    display: inline-block;
    margin: 0 auto;
    background: var(--color-third);
  }
  a.get-in-touch-button span:nth-child(1),a.get-in-touch-button span:nth-child(2),
  a.get-in-touch-button span:nth-child(3),a.get-in-touch-button span:nth-child(4){ position: absolute; }
  a.get-in-touch-button span:nth-child(1),a.get-in-touch-button span:nth-child(3){
    width: 100%;
    height: 3px;
  }
  .get-in-touch-button span:nth-child(2),a.get-in-touch-button span:nth-child(4){
    height: 100%;
    width: 3px;
  }
  a.get-in-touch-button span:nth-child(1) {
    top: 0;
    right: 0;
    background: linear-gradient(to right, var(--color-first), var(--color-second));
    animation: animate1 2s linear infinite;
  }
  @keyframes animate1 {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  a.get-in-touch-button span:nth-child(2) {
    top: 0;
    right: 0;
    background: linear-gradient(to bottom, var(--color-first), var(--color-second));
    animation: animate2 2s linear infinite;
    animation-delay: 1s;
  }
  @keyframes animate2 {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(100%);
    }
  }
  a.get-in-touch-button span:nth-child(3) {
    bottom: 0;
    right: 0;
    background: linear-gradient(to left, var(--color-first), var(--color-second));
    animation: animate3 2s linear infinite;
  }
  @keyframes animate3 {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  a.get-in-touch-button span:nth-child(4) {
    top: 0;
    left: 0;
    background: linear-gradient(to top, var(--color-first), var(--color-second));
    animation: animate4 2s linear infinite;
    animation-delay: 1s;
  }
  @keyframes animate4 {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(-100%);
    }
  }
/*============ Technological Advantages STYLE ==========================*/  
  .widget-container img{ width:100px; height:100px; }
  .widget-container .numbers{
    color:var(--color-first);
    font-size:4rem;
    line-height:2rem;
    font-weight: 700;
    padding:1.5rem 0 1.5rem 0rem;
    font-family: var(--font-family);
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2px;
  }
  .border-style-1{border-style: solid;border-width:2px 1px 1px 2px;box-shadow: 8px 8px 0px 0px #e3e9ff; }
  .border-style-2{
    border-style: solid;
    border-color:var(--color-second);
    border-width:1px 2px 1px 1px;
    box-shadow: 8px 8px 0px 0px #ffd8e2;  
  }
/*============ DSP AND DETAILS STYLE ==========================*/   
  .plateform-section .case-studies-card .case-studies-img{
    width: 160px;height: 160px;background: var(--bg-1);display: block;margin: 10px auto;
  }
  .plateform-section .case-studies-card .case-studies-img img{width: 160px;height: 160px;object-fit: cover;}
  .key-points-block img{width: 100px;height: 100px;object-fit: scale-down;}
  .key-point-section{
    background:url(../img/key-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }
  .key-points-block .overlay-image{
    position: absolute;
    content: '';
    width: 150px;
    height: 150px;
    opacity: 0.05;
    bottom: 0%;
    right: 0%;
    z-index: 1;
  }
  .key-points-block .overlay-image img{width: 100%;height: 100%;}
  .plateform-pointer-section{ background: linear-gradient(var(--color-third), #fff);}
  .solution-bg-section{
    background: linear-gradient(90deg,var(--color-third), rgba(0, 0, 0, 0.2)), url(../img/partner-bg.jpg);
  }
  .solution-bg-section.dsp-bg-solution{
    background: linear-gradient(90deg,var(--color-third), rgba(0, 0, 0, 0.2)), url(../img/dsp/why-choose-us.jpg);
  }
  .solution-bg-section.engagement-bg-solution{
    background: linear-gradient(90deg,var(--color-third), rgba(0, 0, 0, 0.2)), url(../img/engagement/engagement-bg.jpg);
  }
  .solution-bg-section.search-bg-solution{
    background: linear-gradient(90deg,var(--color-third), rgba(0, 0, 0, 0.2)), url(../img/search/Search-syndication-bg.jpg);
  }
  .solution-bg-section{
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  .solution-counters-section{margin-top: -100px}
  .quote-section p{font-size: 1.3rem;position: relative;z-index: 2}
  .quote-section:before{
    position: absolute;
    content: '\201C';
    font-family: "FontAwesome";
    font-size: 10rem;
    opacity: 0.4;
    top: 20%;
    left: 15%;
    font-weight: bold;
    z-index: 1;
    transform: translate(-20%,-15%);
  }
  .quote-section.intro-section:before{display: none;}
  /*** author ***/
    .author-details{
    display: flex;
    align-items: center;
    margin: 10px 0;
    }
    .author-details .author-img{
    display: inline-block;
    width: 35px;
    height: 35px;
    }
    .author-details .author-txt{margin-left: 10px;width: 80%;}
    .author-details .author-img,.author-details .author-txt{clear: both;}
    .author-details .author-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    }
    .author-details .author-txt span{color: #333}
    .author-details .author-txt a{color: #3557ff;}
    .seperatorLine{border-right: 1px solid #333; padding-right: 5px;margin-right: 5px}
    .author-details-desc img {
    width: 150px;
    height: 150px;
    float: left;
    margin:0 20px 20px 0px;
    margin-left:0;
    border-radius:50%;
    object-fit: cover;
    object-position: center;
    }
    .author-details-desc{width:100%}
  /*** pagination ***/
    .pagination .page-item .page-link{color: var(--color-third);}
    .pagination .page-item.active .page-link, .allTopicsSection .pagination .page-item.active .page-link, .paginationBlock .pagination .page-item.active .page-link {
    background: var(--color-second);
    border-color: var(--color-second);
    color: #fff;
    margin-right:5px;
    }
    .article-details h1,.article-details h2,.article-details h3,.article-details h4,.article-details h5,.article-details h6{
    color: var(--color-third);
    font-weight: 700;
    font-family: var(--font-family);
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: 0.5rem;    
    }
    .article-details p, .article-details p span, .article-details span p, .article-details p strong, .article-details span, .article-details a, .article-details p a, .article-details ul li, .article-details ul li strong, .article-details ul li a, .article-details ul li a strong, .article-details ol li, .article-details ol li strong, .article-details ol li a, .article-details ol li a strong, .sitemapList ul li {
    color: var(--color-content);
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.4;
    /*white-space: pre-line;*/
    margin-bottom: 0.5rem;
    padding-bottom: 0rem;
    }
    .article-details ol{padding-left: 0}
    .article-details ul{padding-left: 15px}
    .article-details ul li{list-style:disc}
    .article-details a, .article-details p a, .article-details ul li a, .article-details ol li a, .article-details span a{color:#3557ff;}
    .article-details img{
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: 1rem;
    }