.afb-content-box{padding: 40px 54px; border-radius: 8px;  width: 73.7%;    float: right;}
.about-style2 .about-rrow {
    padding: 0;
}
.afb-img {
    left: -9.5%;
    position: absolute;
    top: 63px;
    width: 47%;
}
.row.about-first-box {
    padding-top: 232px;
    position: relative;
}
.arow-two {
    padding: 54px 24px 54px 54px;
}
.row.about-first-box:before {
    background-image: url(https://kissflow.com/hubfs/ArasiyalArivu/about-dot.png);
    background-position: 19%;
    background-repeat: no-repeat;
    background-size: 602px;
    content: "";
    height: 221px;
    margin: 0 auto;
    position: absolute;
    top: 18px;
    width: 100%;
}

.about-rrow {
    position: relative;
    margin-top: 218px;
    border-radius: 8px;
    padding: 54px;
}
.about-rrow:before {
    content: "";
    background-image: url('https://kissflow.com/hubfs/ArasiyalArivu/about-us-dots2.svg');
    width: 100%;
    height: 230px;
    position: absolute;
    top: -224px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 28% center;
}
.afb-content {
    font-weight: 500;
}
.about-style2 .about-rrow:before {
    background-position: 41% center;
}

@media only screen and (min-width: 1200px) and (max-width: 6000px) {
  .about-top-section .container {
    max-width: 1118px;
}
}

@media only screen and (min-width: 100px) and (max-width: 1892px) { 
  .row.about-first-box:before{background-position: 19.5%;  background-size: 599px;}
  @media only screen and (max-width: 1872px) { 
    .row.about-first-box:before {  background-position: 20.5%;   background-size: 590px;}
  }
   @media only screen and (max-width: 1850px) { 
    .row.about-first-box:before {   background-position: 21.5%;   background-size: 583px;}
  }
  @media only screen and (max-width: 1820px) { 
    .row.about-first-box:before {   background-position: 22.5%;   background-size: 580px;}
  }
   @media only screen and (max-width: 1800px) { 
    .row.about-first-box:before {   background-position: 23%;   background-size: 577px;}
  }
   @media only screen and (max-width: 1778px) { 
     .row.about-first-box {  padding-top: 228px;}
     .row.about-first-box:before {  background-position: 24%;   background-size: 567px;}
  }
    @media only screen and (max-width: 1740px) { 
     .row.about-first-box {  padding-top: 225px;}
     .row.about-first-box:before {  background-position: 25%;   background-size: 556px;}
  }
   @media only screen and (max-width: 1697px) { 
     .row.about-first-box {  padding-top: 223px;}
     .row.about-first-box:before {  background-position: 26%;   background-size: 541px;}
  }
  @media only screen and (max-width: 1660px){
    .row.about-first-box:before {      background-position: 27.5%;     background-size: 531px;    }
  }
   @media only screen and (max-width: 1608px){
    .row.about-first-box:before {      background-position: 29%;     background-size: 520px;    }
  }
  @media only screen and (max-width: 1530px){
.row.about-first-box:before {   background-position: 31.5%;   background-size: 510px;}
  }
  @media only screen and (max-width: 1478px){
    .row.about-first-box:before {   background-position: 33%;    background-size: 493px;}
    .row.about-first-box {   padding-top: 214px;}
    }
  @media only screen and (max-width: 1440px) { 
   .row.about-first-box {  padding-top: 192px;}
    .row.about-first-box:before {  background-position: 33.5%;  background-size: 484px;  height: 205px;   top: 5px;}
  }
  @media only screen and (max-width: 1410px) { 
    .row.about-first-box:before { background-position: 34.5%;  background-size: 478px;}
  }
  @media only screen and (max-width: 1380px) { 
    .row.about-first-box:before {  background-position: 35%;   background-size: 42%;}
  }
  @media only screen and (max-width: 1350px) { 
    .row.about-first-box:before {  background-position: 35.5%;   background-size: 41.5%;}
    .row.about-first-box {  padding-top: 189px;}
  }
  @media only screen and (max-width: 1335x) { 
    .row.about-first-box:before {   background-position: 36.5%;   background-size: 40.5%;}
  }
  @media only screen and (max-width: 1320px) { 
    .row.about-first-box:before {   background-position: 36.2%;    background-size: 41%;}
  }
   @media only screen and (max-width: 1280px) { 
    .row.about-first-box:before {   background-position: 37.2%;   background-size: 40%;}
     .row.about-first-box {   padding-top: 184px;}
  }
  @media only screen and (max-width: 1240px) { 
    .row.about-first-box:before { background-position: 38.5%;  background-size: 39.5%;}
  }
  @media only screen and (max-width: 1200px) { 
    .row.about-first-box:before {
    background-position: 37.5%;
    background-size: 46.5%;}
 
  }
  @media only screen and (max-width: 1180px) { 
   .row.about-first-box:before {    background-position: 39.5%;  background-size: 47.5%;}
  }
  
  @media only screen and (max-width: 1030px) { 
   .row.about-first-box:before {
    background-position: 42.5%;
    background-size: 39.5%;}
  }
  @media only screen and (max-width:1020px) { 
    .row.about-first-box:before{content: none;}
  }
  @media only screen and (max-width: 767px) { 
    .row.about-first-box, .about-botton-wrap {padding: 30px 15px; }
    .row.about-first-box, .about-style2 {background-position: 0 0, 0 0, 100% 0, 0 100%;    background-repeat: no-repeat; border-radius: 8px;
  background-color: #FFF; background-image: repeating-linear-gradient(0deg, #1d181d, #1d181d 10px, transparent 10px, transparent 20px, #1d181d 20px), repeating-linear-gradient(90deg, #1d181d, #1d181d 10px, transparent 10px, transparent 20px, #1d181d 20px), repeating-linear-gradient(180deg, #1d181d, #1d181d 10px, transparent 10px, transparent 20px, #1d181d 20px), repeating-linear-gradient(270deg, #1d181d, #1d181d 10px, transparent 10px, transparent 20px, #1d181d 20px);
  background-size: 1px 100%, 100% 1px, 1px 100% , 100% 1px;}
    .afb-img { left: inherit; position: relative;  top: auto;  width: 100%;}
    .afb-content-box { border-radius: 0; padding: 0; width: 100%; background-image: none;}
    .about-rrow{margin-top: 30px; padding: 30px;}
    .about-rrow::before {content: none;}
    .about-style2 .col-md-5 {  margin-bottom: 30px;}
    .about-style2 .about-rrow {  margin-top: 0;}
    .about-style2 { margin-top: 30px;  padding: 30px;}
    .arow-two {   padding: 15px 15px 0 15px;   background-image: none;}
    .d-sm-none {   display: none;}
  }
  @media only screen and (max-width: 575px) { 
    .about-top-section, .about-bottom-section {  padding: 0 15px;}
    .about-botton-wrap, .row.about-first-box {  padding: 20px 5px;}
    .about-rrow{padding: 20px;}
  }
}