body{font-family: "Raleway", sans-serif; font-optical-sizing: auto;}

.section{padding: 80px 0;}
.btn1{background:#1C8EFE; color: #fff; padding: 10px 20px; border-radius: 80px; text-decoration: none; font-size: 16px; font-weight: 700; font-size: 14px; text-transform: uppercase;}
.btn1:hover{background: #181445; color: #ffffff; transition: all 0.3s ease-in-out;}
.btn2{background:none; border: #181445 solid 1px; color: #181445; padding: 10px 20px !important; border-radius: 80px; text-decoration: none; font-size: 16px; font-weight: 700; font-size: 14px; text-transform: uppercase;}
.btn2:hover{background: #181445; border: #181445 solid 1px; color: #ffffff !important; transition: all 0.3s ease-in-out;}
.index_banner{padding: 60px 0 150px 0; }
.index_body{background: url(../img/index_banner.png) top right; background-size: 90%;  background-repeat: no-repeat;}
.header .nav-link{color: #000000; font-size: 16px; font-weight: 600; margin-left:20px; padding: 10px 20px;}
.header .nav-link:hover{color: #1C8EFE !important; transition: all 0.3s ease-in-out;}
.index_banner h1{color: #181445; font-size: 60px; font-weight: 400; }
.index_banner h1 span{color: #FDA310 ; font-size: 60px; font-weight: 800; }
.index_banner h2{color: #8B8B8B ; font-size: 30px; font-weight: 500; }
.index_banner p{color: #000000 ; font-size: 22px; font-weight: 600; }
.section_2 h2{color: #000000; font-size: 33px; font-weight: 600;}
.section_2 p{color: #8B8B8B; font-size: 22px; font-weight: 600; }
.section_2 .box_1 .box{ border-right: #fff dashed 1px; margin: 50px;}
.box_1{background: #181445 url(../img/watter_logo.png) left center no-repeat; border-radius: 20px; }
.box_1 h3{color: #fff; font-size: 45px; font-weight: 400;  margin-bottom: 10px;}
.box_1 p{color: #8D8BFF; font-size: 27px;  font-weight: 500;}
.color1{color: #6DC4FF !important;}
.color3{color: #FDA310 !important; }
.hading_1{color: #181445; font-size: 42px; font-weight: 700;margin-bottom: 30px;}
.hading_1 span{color: #1C8EFE;  }
.section_3 p{color: #8B8B8B; font-size: 22px; font-weight: 500; margin-bottom: 30px;}
.test_h{color: #1C8EFE !important; font-size: 22px; font-weight: 600; margin-bottom: 30px; font-style: italic;}
.bg_1{background:url(../img/bg_1.png) no-repeat left center; background-size: 100%; }
.bg_2{background:url(../img/bg_2.png) no-repeat right center; background-size: 100%; }
.bg_3{background:url(../img/bg_3.png) no-repeat left center; background-size: 100%; }
.bg_4{background:url(../img/bg_4.png) no-repeat left center; background-size: 100%; }
.bg_5{background:url(../img/bg_5.png) no-repeat left center; background-size: 100%; }
.bg_6{background:#F3F9FF url(../img/bg_6.png) no-repeat left center; background-size: 100%; }
.digital_offers_section .card1{background: #fff; border-radius: 20px; padding: 30px; border: #181445 solid 1px; min-height:300px;transition: all 0.5s ease-in-out;}
.digital_offers_section .card1 h2{font-size: 22px; font-weight: 700; color: #000; margin-top: 20px;}
.digital_offers_section .card1 p{font-size: 16px;  color:#8B8B8B; margin: 0;}
.digital_offers_section .card1:hover{background: #1C8EFE;border: #1C8EFE solid 1px; color: #fff; }
.digital_offers_section .card1:hover h2{color: #fff;}
.digital_offers_section .card1:hover p{color: #fff;}
.digital_offers_section .card1:hover img{ filter: brightness(0) invert(1);}   
.digital_offers_section .card2{ background: #181445 url(../img/box2_bg.png) no-repeat left bottom; border-radius: 40px; padding:45px; color: #fff;}
.digital_offers_section .card2 h2{ font-size: 45px; font-weight: 700;}
.digital_offers_section .card2 p{ font-size: 22px;}
.we_wanted_section{background:#CAE5FF url(../img/we_wanted_section_bg.png) left center no-repeat;}
.card_3{background: #fff; border-radius: 20px; padding: 30px; min-height:400px; color: #000; transition: all 0.2s ease-in-out;}
.card_3 .ho{display: none;transition: all 0.3s ease-in-out;}
.card_3:hover .ho{display: block;transition: all 0.3s ease-in-out;}
.card_3:hover .na{display: none;transition: all 0.3s ease-in-out;}
.card_3 p{font-size: 20px; font-weight: 600; margin-top: 20px;}
.card_3:hover{background: #181445 url(../img/bg_h_3.png) right center; color: #ffffff; }
.clients_section{ background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(217, 217, 217, 0.2) 100%);}
.footer{background: #181445; padding: 50px 0 20px 0; color: #fff;}
.review_box{background:url(../img/tac_icon.png) no-repeat center center;  padding: 0}
.review_box h2{color: #000; font-size: 18px; font-weight: 700; margin-bottom: 20px; text-transform: uppercase;}
.review_box h3{color: #1C8EFE; font-size: 40px; font-weight: 700; margin-bottom: 30px;}
.review_box p{color: #8B8B8B; font-size:16px; font-weight: 500; line-height: 30px;}
.tousch_label{display: flex; align-items: center;}
.tousch_label p{ padding: 10px; margin: 0;}
.footer h2{color: #fff; font-size: 18px; font-weight: 700;}
.footer h3{color: #CAE5FF; }
.footer ul{list-style: none; padding: 0; margin: 0;}
.footer ul li{margin-bottom: 10px;}
.footer ul li a{color: #6DC4FF; text-decoration: none; font-size: 14px; font-weight: 600;}
.footer ul li a:hover{color: #1C8EFE; transition: all 0.3s ease-in-out;}
.coppy_right{border-top: 1px solid #FFFFFF3B; padding-top: 30px; font-size: 14px; color: #fff;}
.star_1{position: absolute; top: 20px; right: 20px; z-index: 5;}
.btn_arrow{position: absolute; top: 25px; right: 25px;  z-index: 5;}
.ban_kit1{position: absolute; z-index: 10; left: 35%; bottom: 50px;}
.ban_kit2{position: absolute; z-index: 10; left: 40%; bottom: 100px;}
.ban_kit3{position: absolute; z-index: 10; left: 0; top: 10%;}
.ban_kit4{position: absolute; z-index: 10; left: 50%; top:2%;}
.ban_kit5{position: absolute; z-index: 10; right: 15%; bottom:15%;}
.ban_kit6{position: absolute; z-index: 10; right: 5%; bottom:15%;}
.animated { animation: up-down 2s ease-in-out infinite alternate-reverse both; }
 @keyframes up-down {
    0% {
      transform: translateY(10px);
    }
  
    100% {
      transform: translateY(-10px);
    }
  }



.inner_banner{background: #1C8EFEA6 url(../img/inner_banner.png) no-repeat center; padding: 60px 0; color: #fff; background-size: cover;}
.inner_banner h1{color: #181445; font-size: 35px; font-weight: 700; text-transform: uppercase; }
.inner_banner h2{color: #fff; font-size: 45px; font-weight: 500; }
.count_section{background: #181445 url(../img/count_bg.png); background-size: cover; padding: 60px 0; color: #fff;}
.count_section h2 .count_section span{color: #fff; font-size: 60px; font-weight: 600; margin-bottom: 10px;}
.count_section p{font-size: 22px; font-weight: 700; color: #ffffff; margin: 0; }
.owl-theme .owl-dots .owl-dot span {background: #1C8EFE;}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #1C8EFE; width: 30px;}
    .owl-theme .owl-dots{text-align: left;}
.hading_2{color: #1C8EFE; font-size: 30px; font-weight: 700; margin-bottom: 30px;}
.contact_box{background: #181445 url(../img/contact_box_bg.png) no-repeat bottom left; border-radius: 50px; padding: 10px; color: #fff;}
.contact_box_img{border-radius: 40px;}
.contact_in{padding: 40px; }
.contact_in h3{color: #fff; font-size: 14px; font-weight: 700; margin-top: 20px; text-transform: uppercase;}
.contact_in h4{color:#FDA310; font-size: 22px; font-weight: 700; }
.contact_in p{ font-size: 16px; }
.contact_in span{border: 1px solid #1C8EFE; border-radius: 80px; background: none; padding:15px 30px; color: #1C8EFE; margin-top: 20px; display: inline-block;}

.blog_box h3{color: #181445; font-size: 35px; font-weight: 700; margin-top: 20px;}
.blog_box h4{color: #1C8EFE; font-size: 22px; font-weight: 500; margin-top: 20px;}
.blog_box p{color: #8B8B8B; font-size: 22px; font-weight: 500; margin-top: 15px;}
.blog_box small{color: #8B8B8B !important; font-size: 15px !important; font-weight: 500 !important; display: inline-block;}
.explore_tab .nav-pills{float: right;}
.explore_tab .nav-pills .nav-link{background: none; color: #8B8B8B;  font-size: 20px; font-weight: 600; margin-left: 10px;}
.explore_tab .nav-pills .active {background: none; color: #1C8EFE;  font-size: 20px; font-weight: 600; margin-left: 10px;}
.whatsapp_flot{position: fixed; right: 10px; bottom: 10px;}
.ceo{width: 40px; border-radius: 50%;}
.all_locos img{border-radius: 10px;}



.timeline:before {content: '';position:absolute; height:100%; left:50%; width:2px; top:-20px;  background: url(../img/timeline_bg.png) repeat-y;
  z-index:1;}
.timeline{  position:relative;  margin: 50px auto;  width:1000px;  padding:50px 0;}
.timeline ul{  margin:0;  padding:0 ;}
.timeline ul li{ list-style:none;  box-sizing:border-box;   line-height:normal;  position:relative;  width:50%;  padding: 40px 70px;}
.timeline ul li .right_content h2{  color:rgba(59,112,239,1);  padding:0px 2px 18px 0px;}
.timeline ul li:nth-child(odd){  float:left;  text-align:left;  clear:both;}
.timeline ul li:nth-child(even){ float:right;  text-align:left;  clear:both;}
.left_content{  padding-bottom:20px;}

.timeline ul li:nth-child(odd):before{  content: '';  position:absolute;  width:10px;  height:10px;  background:rgba(59,112,239,1);
  border-radius:50%;  box-shadow: 0 0 0 3px rgba(58,112,239,0.2);  right:-6px;  top:24px;  z-index:1;
}
.right_content{background: #fff; box-shadow: 0px 10px 25px 0px #0000001A; border-radius: 25px; padding: 20px;}
.timeline ul li:nth-child(even):before{
  content: '';
  position:absolute;
  width:10px;
  height:10px;
 background:rgba(59,112,239,1);
  border-radius:50%;
  box-shadow: 0 0 0 3px rgba(58,112,239,0.2);
  left:-6px;
  top:24px;
}

.timeline ul li:nth-child(odd) .left_content{
  position:absolute;
  top:12px;
  right:-500px;
  width: 450px;
  margin:0;
}

.timeline ul li:nth-child(even) .left_content{
  position:absolute;
  top:12px;
  left:-450px;
  width: 450px;
  margin:0;
  padding:8px 16px;

}


@media (max-width: 1000px){
  
  .timeline{
    width:100%;
  }
}

@media (max-width: 767px){
  .timeline{
    width:100%;
  }
  .timeline:before{
    left:20px;
  }
  .timeline ul li:nth-child(odd),
  .timeline ul li:nth-child(even){
    width:100%;
    text-align:left;
   padding-left:50px; 
  }
  
  .timeline ul li:nth-child(odd):before
    {
    top:-18px;
    left:16px;
  
  }
  .timeline ul li:nth-child(even):before
  { 
    top:-18px;
    left:16px;
  }
  
    .timeline ul li:nth-child(odd) .left_content,
  .timeline ul li:nth-child(even) .left_content
  {
    top:-30px;
    left:50px;
    right:inherit;
  }

  
}












  @media only screen and (max-width:700px) {
    .section_2 .box_1 .box {   border-bottom: #fff dashed 1px; border-right: 0;} 
    .section_2 .box_1 .box{margin: 0; text-align: center; padding: 20px;}
    .hading_1{font-size: 30px;}
    .digital_offers_section .card1{text-align: center;}
    .card_3{text-align: center;}
    .inner_banner h1{font-size: 28px; text-align: center;}
    .inner_banner h2{font-size: 30px; text-align: center;}
    .count_section{text-align: center;}


   }