/*......................adobe-pallette................*/
/*first-color:#9B17BF;
second-color:#160A40;
third-color:#2B1773;
fourth-color:#F2F2F2;
fifth-color:#0D0D0D;*/

@import url('https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');
@import url('https://fonts.googleapis.com/css?family=Changa&display=swap');
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
body{
  font-family: 'Gilroy-Medium, Ariel';
  /*letter-spacing: 1.5px;
  word-spacing: 4px;*/
  line-height: 24px;
  font-weight: 400;
  font-size: 20px;
  text-align: justify;
  padding: 0;
  margin: 0;
 }

*{
  text-decoration: none;
}
a{
  color: black;
}
a:hover {
  text-decoration: none;
  color: rgba(0,0,0,.5);
}
.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0;
}
.pr-color{
  color: #2B1773;
}
.sr-color{
  color: #9B17BF;
}
.p-m-none{
  padding: 0;
  margin: 0;
}
.heading{
  background-image: linear-gradient(to right, #241D47 0%, #7F174C 100%);
  color: #ffffff;
  text-align: center;
}
.help-block,#errmsg{
  font-size: 12px;
  color: red;
}
.hide{
  display: none;
}
.pr-back-color{
  background:  linear-gradient(to right,#160A40 40%,#CC7FD8); 
}
.baf{
  width: 100%;
  height: 400px;
}
.service-type{
  width: auto;
  height: 200px;
}
/*.card{
  height: 100%;
}*/

/*.................................digital-marketing-heading......................*/
  .container-animated {
      border: 20px solid transparent;
      box-sizing: border-box;
      text-transform: uppercase;
      font-weight: 900;
      /*font-size: 1em;
      letter-spacing: 1em;
      padding: 1rem;*/
      display:flex;
      justify-content: center;
      align-items: center;
    }
.demo {

      background-image:
        linear-gradient(white, white),
        linear-gradient(270deg, #00D7B9, #B95DD7 50%, #FFB367 100%);

      background-repeat: no-repeat;
      background-origin: padding-box, border-box;
      text-align: center;
    }
.digital-marketing-heading-animated {
      background-image:
        linear-gradient(white, white),
        linear-gradient(180deg, cornflowerblue, purple 50%, cornflowerblue);

      background-repeat: no-repeat;
      background-size: 100% 100%, 100% 200%;
      background-position: 0 0, 0 100%;
      background-origin: padding-box, border-box;
      animation: highlight 1s infinite alternate;
    }

    @keyframes highlight {
      100% {
        background-position: 0 0, 0 0;
      }
    }

  /*..............................end-digital-marketing-heading......................*/  

/*...................................hover-links.............................*/

.hover-links{
  font-family: 'Noto Sans KR', sans-serif;
  letter-spacing: 1px;
  font-size: 12px;
  position: absolute;
  z-index: 1200;
   color: blue;
  top:40%;
  left: 10%;
  background-color: rgba(0,0,0, 0.7);
  border: 3px solid black;
  color: #ffffff;
  font-weight: 400;
  padding: 3px;
  width: 80%;
  border-radius:5px;
  display: none;
}

.hover-link-div:hover .hover-links{
  display: inline-block;
}
/*..............................end-hover-links............................*/

/*..................................main-headings...........................*/

.section-head span {
    display: inline-block;
    text-decoration: none;
    color: #281483;
    font-size: 30px;
}
.section-head h4 {
  position: relative;
  padding:0;
  color:#9B17BF;
  line-height: 1;
  letter-spacing:0.3px;
  font-size: 30px;
  font-weight: 700;  
  text-align:center;
  text-transform:none;
  margin-bottom:50px;
}
.section-head h4:before {
  content: '';
  width: 60px;
  height: 3px;
  background: #2B1773;
  position: absolute;
  left: 0px;
  bottom: -10px;
  right:0;  
  margin:0 auto;
}


/*...............................................navbar........................................*/

.menu-area{
  /*width: 100%;*/
  position: static;
}
.header a{
  color: #ffffff;
}
.mega-area{
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  background-color: #F8F8F8;
  padding: 15px;
}
.mega-area a,.mega-area p{
  font-size: 13px;
  color: #67717D;
  word-spacing: 5px;
}
.logo{
  width: 60px;
  height: 60px;
}
.navbar-light .navbar-brand {
   
}
.navbar-light .navbar-nav .nav-link {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0,0,0,.5);
}
.navbar-light .navbar-nav .nav-link:hover{
  text-decoration: underline;
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    /*color: #ffffff;*/
    text-decoration: underline;
}
.navbar-light .navbar-nav .nav-link:visited {
  /*color: #ffffff;*/
}
.navbar-light .navbar-toggler {
    color: rgba(255,255,255,.5);
    border:none;
}
.navbar-light .navbar-toggler:hover{
    color: rgba(255,255,255,0.5);
    border:0.5px solid #333333;
}

/*.........................................end...navbar.....................................*/


/*.........................................social-icons..............................*/

/*    a, a:hover {
  text-decoration: none;
}*/
.socialbtns{
  z-index: 1000;
  position:fixed;
  /*top: 500px;*/
  display: none;
  left:-40px;
  /*bottom: -300px;*/   
}
.socialbtns, .socialbtns ul, .socialbtns li {
  margin: 0;
  line-height: 2;
  /*padding: 5px;*/
}
/*.social{
  z-index: 1000;
  position:fixed;
  left:-40px;
}*/
.social li:nth-child(1) a{ background: #3b5998 }
.social li:nth-child(2) a{ background: #00aced }
.social li:nth-child(3) a{ background: #dd4c39 }
.social li:nth-child(4) a{ background: #007bb6 }
.social li:nth-child(5) a{ background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) }
.social li:nth-child(6) a{ background: #bb0000 }
.socialbtns li {
    list-style: none outside none;
    display: block;
}

.socialbtns .fa {
  color: #FFF;
  width: 32px;
  height: 32px;
  padding-top: 10px;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
  transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  transform: rotate(-360deg);
  -moz-transform: rotate(-360deg);
  -webkit-transform: rotate(-360deg);
  -o-transform: rotate(-360deg);
}

.socialbtns .fa:hover {
  transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
  transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}


/*.........................................end-social-icons......................*/

/*...............................contact-checkbox-list..........................*/
.dropdown-menu{
  padding: 20px;
}
.dropdown.multiselect input[type="checkbox"] {
  display: none;
  }

  .dropdown.multiselect input[type="checkbox"] + label:before {
    content: '\00a0';
    width: 15px;
    display: inline-block;
    padding-right: 20px;
  }

  .dropdown.multiselect input[type="checkbox"]:checked + label:before {
    content: '\2714';
    padding-right: 20px;
  }

  /*............................end-contact-form-list.........................*/

/*................................carousel..........................*/
.slide1 img{
  height: 77vh;
}

.carousel-indicators li{
  height: 5px;
}
.carousel-indicators .active {
    background-color: #170942;
}
.carousel-control-next-icon, .carousel-control-prev-icon { 
    display: inline-block;
    width: 10px;
    height: 10px;
    background: no-repeat 50% 100% 100%;
}
.carousel-control-next,.carousel-control-prev {
  position: absolute;
  top:40%;
    color: #fff;
    text-decoration: none;
    background-color: #170942;
    outline: 0;
    width: 20px;
    height: 20px;
}
/*.........................end....carousel.........................*/

/*.....................................blog..............................*/
.blog .btn{
  background-color: #ffffff;
  color: black;
  border:2px solid #281483;
  font-size: 10px;
}
.blog label{
  font-size: 12px;
}
.blog .btn:hover{
  background-color: #281483;
  color: #ffffff;
}
/*................................end....blog.............................................*/

/*................................footer...........................................*/
.footer{
  font-family: 'Noto Sans KR', sans-serif;
  letter-spacing: 1px;
  line-height: 25px;
  font-size: 12px;
  color: #ffffff;
}
.footer a{
  color: #c0c0c0;
}
.footer a:hover{
  color: #ffffff;
}
.logo-footer:nth-child(1){
  color: #304F88;
}
.logo-footer:nth-child(2){
  color: #1DA1F2;
}
.logo-footer:nth-child(3){
  color: #FF0000;
}
.logo-footer:nth-child(4){
  color: #0274B3;
}
.logo-footer{
  font-size: 15px;
  font-weight: 400;
  padding: 7px;
  width: 30px;
  /*color: red;*/
  background-color:white;
  border-radius: 50%;
}
.logo-footer:hover{
  color: #fff;
  background:  linear-gradient(to right,#281483 60%,#CC7FD8);
  text-decoration: none;
  transform: rotate(10deg);
  transition: .2s;
}
/*..................................under-line...................................*/

.underline {
       text-decoration: none; 
       position: relative; 
     }   

    .underline:after {
      position: absolute;
      content: '';
      height: 2px;
      bottom: -4px; 
      margin: 0 auto;
      left: 0;
      right: 0;
      width: 0;
      background: green
      -o-transition:.5s;
      -ms-transition:.5s;
      -moz-transition:.5s;
      -webkit-transition:.5s;
      transition:.5s;
    }
    .underline:hover:after {
      width: 100%;
      background: orange;
    }
/*.................................end.footer.....................................*/

/*.......................................card..................................*/
.card1{
}
.card1 i{
  font-size: 50px;
  color: #7848AC;
}
.card1 .btn{
  background-color: #ffffff;
  color: black;
  border:2px solid #281483;
}
.card1:hover{
  box-shadow: 1.563px 8.863px 20px 0 rgba(0, 0, 0, 0.13);
  border:none;
  transition: 0.5s;
}
.card1:hover .btn{
  background-color: #281483;
  color: #ffffff;
  border:2px solid #281483;
}

/*...................................end.card..................................*/

/*........................................form............................................*/
 
.form-control {
    display: block;
    width: 100%;
    height: 40px;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    color: #495057;
    background-color: #E9ECEF;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
form .form-group{
  margin-top: 20px;
}
.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 0 0.5px rgba(0,123,255,.25);
}
/*...................................end..form............................................*/

/*...............................................whats-up..............................*/
.whatsup-float:hover{
  color:#ffffff;
}
.whatsup-float{
  color:#ffffff;
  border-radius:50px;
  text-align:center;
  font-size:25px;
     }

    *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
.video__icon {
  z-index: 1100;
  position: fixed;
  bottom:60px;
  right:40px;
   }
  .video__icon .circle--outer {
    border: 1px solid #2B1773;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 5px;
    position: relative;
    opacity: .8;
    -webkit-animation: circle 2s ease-in-out infinite;
            animation: circle 2s ease-in-out infinite; }
  .video__icon .circle--inner {
    background: #25d366;
    text-align: center;
    /*color: #e50040;*/
    padding: 7px;
    left: 10px;
    top: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    opacity: .8; }
    .video__icon .circle--inner:after {
      content: '';
      display: block;
      border: 2px solid #2B1773;
      border-radius: 50%;
      width: 48px;
      height: 48px;
      top: -4px;
      left: -4px;
      position: absolute;
      opacity: .8;
      -webkit-animation: circle 2s ease-in-out .2s infinite;
              animation: circle 2s ease-in-out .2s infinite; }
  .video__icon p {
    color: #000;
    text-align: center; }

@-webkit-keyframes circle {
  from {
    -webkit-transform: scale(1);
            transform: scale(1); }
  
  to {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    opacity: 0; } }

@keyframes circle {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    }
  
  to {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
    } }
 /*...........................................end-whats-up...........................*/ 

 /*..............................baf-head.............................................*/ 
 .baf-head{
     position: absolute;
     top: 35%;
     left: 40%;
     font-family: lobster;
 }
 /*..............................baf-head.............................................*/  


/*.............................................technical-experts.....................*/

@-webkit-keyframes scroll {
  0% {
    -webkit-transform: translateX(calc(-170px * 7));
            transform: translateX(calc(-170px * 7));
  }
  100% {
   -webkit-transform: translateX(0);
            transform: translateX(0);
  }

}
.slider {
  background: white;
  /*height: 150px;*/
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.slider::before, .slider::after {
  /*background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);*/
  content: "";
  height: 150px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.slider::after {
  left: 0;
  top: 0;
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}
.slider::before {
  right: 0;
  top: 0;
}
.slider .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 10);
}
.slider .slide {
  height: 100px;
  width: 250px;
  text-align: right;
}
.slider .slide img{
  padding: 10px;
}

/*...................................right-to-left-scroll----------------------------*/

@-webkit-keyframes scroll1 {
 0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(calc(-250px * 7));
            transform: translateX(calc(-250px * 7));
  }
}
.slider1 {
  background: white;
  /*height: 150px;*/
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.slider1::before, .slider1::after {
  content: "";
  height: 150px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.slider1::after {
  right: 0;
  top: 0;
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}
.slider1::before {
  left: 0;
  top: 0;
}
.slider1 .slide-track {
  -webkit-animation: scroll1 40s linear infinite;
          animation: scroll1 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}
.slider1 .slide {
  height: 100px;
}
.slider1 .slide img{
  padding: 10px;
}
/*..................................end-opposite-scroll..............................*/

/*.............................................end-technical-experts.....................*/

/*......................................end-technical-experts.....................*/     

    @media screen and (max-width: 1200px) { 
         
     }
     @media screen and (max-width: 992px) { 
      /*.carousel-inner {
           height: 350px; 
          height: 600px;
          position: relative;
          width: 100%;
          overflow: hidden;
      }*/
      .col-lg-8 .m-top, .col-lg-7 .m-top, .col-lg-6 .m-top, .col-lg-5 .m-top, .col-lg-4 .m-top, .col-lg-3 .m-top , .col-lg-2 .m-top{
          margin-top: 20px;
        }
        .col-lg-8 .m-top-mb, .col-lg-7 .m-top-mb, .col-lg-6 .m-top-mb, .col-lg-5 .m-top-mb, .col-lg-4 .m-top-mb, .col-lg-3 .m-top-mb , .col-lg-2 .m-top-mb{
          margin-bottom: 1rem;
        }
         
     }
     @media screen and (max-width: 768px) { 
          h1{
            font-size: 22px;
          }
          h2{
            font-size:20px;
          }
          h3{
            font-size: 18px;
          }
          h4{
            font-size: 16px;
          }
          h5{
            font-size: 14px;
          }
          h6,p,b,label,a,input,span,.btn{
            font-size: 12px;
          }

          li{
            font-size: 15px;
          }
          .baf{
          width: 100%;
          height: 300px;
         }

        .logo{
          width: 50px;
          height: 50px;
        }
        .carousel-inner {
          /* height: 350px; */
          height: 490px;
          position: relative;
          width: 100%;
          overflow: hidden;
      }
        .navbar-light .navbar-nav{
          padding: 10px;
          border-radius: 5px;
        }

        /*.......................end...navbar.....................................*/

        /*.......................................card..................................*/
            .card1{
            }
            .card1 i{
              font-size: 40px;
              color: #7848AC;
            }

/*...................................end.card..................................*/


/*..................................main-headings...........................*/

.section-head span {
    display: inline-block;
    text-decoration: none;
    color: #281483;
    font-size: 20px;
}
.section-head h4 {
  position: relative;
  padding:0;
  color:#9B17BF;
  line-height: 1;
  letter-spacing:0.3px;
  font-size: 20px;
  font-weight: 700;  
  text-align:center;
  text-transform:none;
  margin-bottom:50px;
}
.section-head h4:before {
  content: '';
  width: 60px;
  height: 3px;
  background: #2B1773;
  position: absolute;
  left: 0px;
  bottom: -10px;
  right:0;  
  margin:0 auto;
}

/*....................................end-main-headings......................*/

         

         /*..............................baf-head.............................................*/ 
         .baf-head{
             top:30%;
             left:35%;
         }

         /*................................carousel..........................*/
        .carousel-indicators li{
          height: 4px; 
        }
        .slide1 img{
          height: 40vh;
        }
        .carousel-control-next,.carousel-control-prev {
            top: 50%;
        }
        /*.........................end....carousel...........................*/


    }

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



/*......................................end...media....................*/