#section-slide-aboutus { background: url('../img/about/slide-background.png') no-repeat top left; /*margin-top: -70px;*/ position: relative; z-index: 0; background-size: cover; padding:100px 0px 100px 0px; color:white;}
#section-about-whychoose-quote{background-color: #ffcc00;/*margin-top: -85px;*/ position: relative; z-index: 0; padding: 100px 10% 100px 10%;}
#section-whychoose-slide{position: relative; z-index: 0; background-color: #2e2e2d; padding: 100px 10% 100px 10%;}
#section-responsible-row-1{background-color: #ffcc00; /*margin-top: -110px;*/ position: relative; z-index: 0; padding: 100px 5% 100px 5%; overflow: hidden;}
#section-responsible-row-2{background-color: #FFF;  position: relative; z-index: 0; padding: 10px 5% 30px 5%;}
#section-responsible-row-3{background-color: #f2ebe4;  position: relative; z-index: 0; padding: 30px 5% 30px 5%;}
#section-responsible-row-4{background-color: #FFF;  position: relative; z-index: 0; padding: 100px 5% 100px 5%;}
#section-responsible-list-mobile{background-color: #FFF;  position: relative; z-index: 0; padding: 100px 5% 100px 5%; display:none; overflow:hidden!important;}
#section-responsible-row-4-mobile{background-color: #f0ece3;  position: relative; z-index: 0; padding: 100px 5% 100px 5%;display:none;overflow:hidden!important;}
#section-responsible-csr{background-color: #ffcc00; position: relative; z-index: 0; padding: 100px 14% 100px 14%; overflow: hidden;}
#section-about-history{background-color: #f2ebe4; /*margin-top: -110px;*/ position: relative; z-index: 0; padding: 100px 0% 100px 0%;}

#section-aboutus-history{    background: url('../img/about/history/background-yellow.png') no-repeat top left;position: relative;z-index: 0;background-size: cover;padding: 100px 5% 100px 10%;display: block;}
#section-history-video{background: white; position: relative; z-index: 0; overflow: hidden; padding: 100px 15% 100px 15%;}
#section-history-vision{background-color: #2e2e2d; position: relative; z-index: 0;     overflow: hidden;padding: 100px 10% 100px 10%;}
#section-history-milestone{background: url('../img/about/history/background-yellow.png') no-repeat top left; position: relative; z-index: 0; background-size: cover; padding: 100px 5% 100px 10%;}
#section-history-milestone-mobile{background: url('../img/home/mobile/bg-mobile-history.jpg') no-repeat top left; position: relative; z-index: 0; background-size: cover; padding: 100px 5% 100px 5%; display:none;}
.about-item-press {overflow:hidden; position: relative; width:100%; float:left!important; text-align:center;}
.about-item-inner-press {margin-left: 0px; padding:0%;}
.about-item-image-press {background-color: transparent;  overflow: hidden; position: relative; width: 75%; margin: 0 auto;background-repeat: no-repeat; background-position: center; background-size:cover; }
.about-item-image-press:before {content: ""; display: block; padding-top: 70%;}
.about-item-image-inner-press {position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.about-item-image-press img {visibility: hidden; max-width: 100%; height: 100%;}
.about-hs-foudation-title{font-family: 'touchebold';font-size: 29px;color: #2e2d2c;}
.about-hs-foudation-text{font-family: 'gibsonregular';font-size: 17px;color: #2e2d2c; margin-top:5%;}
.about-foundation-content{width:50%; float:left;}
.empty-container {
    background: url('../img/about/background-black-small.png') no-repeat top left;
    position: relative;
    z-index: 0;
    margin-top: -5px;
    background-size: cover;
    padding: 65px 10% 70px 10%;
}
.banner-image-left {
    width: 57%;
    position: relative;
    left: 0px;
    top: -64px;
    /* top: 5%!important; */
}

.banner-image-right {
    width: 70%;
    position: absolute;
    right: 0;
    top: -108px;
}

.banner-image-right-whychoose {
    width: 71%;
    position: absolute;
    right: 0;
    top: -115px;
}

.banner-image-left-whychoose{
    width: 57%;
    position: relative;
    left: 0px;
    top: -76px;
}

.gradient-left{
    position: absolute;
    top: 0;
    left: 0;
    width: 155px;
    z-index: 1;
}

.gradient-right{
    position: absolute;
    top: 0;
    right: 0;
    width: 155px;
    z-index: 1;
}




.aboutus-banner-title-text{
    font-family: 'touchebold';
    font-size: 48px;
    color: #2e2d2c;
}

.aboutus-banner-desc-text{
    font-family: 'gibsonregular';
    font-size: 17px;
    color: #2e2d2c
}

.aboutus-banner-content {
    position: absolute;
    right: 225px;
    top: 85px;
    width: 25%;
}


.aboutus-slide-item{padding-left: 40px;padding-right: 40px;}
.section-aboutus-container .slick-next, .section-aboutus-container .slick-next:hover, .section-aboutus-container .slick-next:focus {background: url('../img/about/slide-right.png') no-repeat 0 0; z-index : 2}
.section-aboutus-container .slick-prev, .section-aboutus-container .slick-prev:hover, .section-aboutus-container .slick-prev:focus {background: url('../img/about/slide-left.png') no-repeat 0 0; z-index : 2}
.section-aboutus-container .slick-next {opacity: 1; position:absolute; right: 80px; width: 40px; height: 40px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.section-aboutus-container .slick-next:hover {opacity: 0.7;}
.section-aboutus-container .slick-next:before {content: none;}
.section-aboutus-container .slick-prev {opacity: 1; position: absolute; left: 80px; width: 40px; height: 40px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.section-aboutus-container .slick-prev:hover {opacity: 0.7;}
.section-aboutus-container .slick-prev:before {content: none;}
.section-aboutus-container .slick-dots li button {width: 38px; height: 35px; background: url('../img/about/slide-list.png') no-repeat 0 0;}
.section-aboutus-container .slick-dots li button:before {content: none;}
.section-aboutus-container .slick-dots li.slick-active button {background: url('../img/about/slide-list-active.png') no-repeat 0 0;}
.section-aboutus-container .slick-dots {
    bottom: -65px;
}
.aboutus-slide-left{
    float:left; width:50%;padding-right: 5%;
}

.aboutus-slide-right{
    float:right; width:50%;
}

.aboutus-slide-title{
    font-family:'touchebold';
    font-size:38px;
    color:#ffcc00;
    margin-bottom: 3%;
}

.aboutus-slide-desc{
    font-family:'gibsonregular';
    font-size:17px;
    color:#ffffff;
}

.aboutus-slide-button {
    background: url('../img/about/button-slide-2.png') no-repeat 0 0;
    background-size: cover;
    width: 196px;
    height: 41px;
    padding-left: 45px;
    padding-right: 35px;
    padding-top: 10px;
    display: block;
    font-family: 'touchebold';
    font-size: 11px;
    color: #2e2d2c;
    margin-top: 5%;
    letter-spacing: 0.7px;
    text-align: center;
}

.aboutus-slide-button-2{
    background: url('../img/about/button-slide-1.png') no-repeat 0 0;
    background-size: contain;
    width: 100%;
    max-width: 298px;
    height: 41px;
    text-align: center;
    padding-top: 10px;
    display: block;
    font-family: 'touchebold';
    font-size: 11px;
    color: #2e2d2c;
    margin-top: 5%;
    letter-spacing: 0.7px;
}
.about-slide-text{
    position:relative; font-family:'touchebold'; font-size:26px; color:#ffcc00; right: -96%; top: -30px;z-index: -1;
}
.aboutus-slide-button a{color: #2e2d2c;}
/* .product-item.slick-slide.slick-current.slick-active.slick-center{
    width: 1130px!important;
} */

.about-mb-3{margin-bottom:3%;}

.aboutus-whychoose-border-content {
    background: url('../img/about/whychoose/text-content.png') no-repeat 0 0;
    background-size: cover;
    width: 195px;
    height: 35px;
    font-family: 'touchebold';
    font-size: 16px;
    color: #2e2d2c;
    text-align: center;
    padding-top: 7px;
    margin-bottom: 3%;
}

.aboutus-whychoose-border-content-2 {
    background: url('../img/about/whychoose/text-content (2).png') no-repeat 0 0;
    background-size: cover;
    width: 210px;
    height: 35px;
    font-family: 'touchebold';
    font-size: 16px;
    color: #2e2d2c;
    text-align: center;
    padding-top: 7px;
    margin-bottom: 3%;
}

.whychoose-banner-content {
    position: absolute;
    right: 35px;
    top: 75px;
    width: 45%;
    color: white;
}

.whychoose-banner-small{margin-left:5%;font-family:'touchesemibold'; font-size:12px; color:#ffffff;}
.whychoose-banner-text{font-family:'toucheregular'; font-size:34px; color:#ffcc00;}

.whychoose-quote-content{width:100%; margin-bottom:10%;}
.whychoose-quote-left{width:50%;float:left;}
.whychoose-quote-right{width:50%;float:left;}
.whychoose-quote-img, .whychoose-quote-img-1{ width:25%;float:left; text-align:right; padding-right:5%;}
.whychoose-quote-text-content, .whychoose-quote-text-content-1{width:75%; float:left;}
.whychoose-quote-text-1{font-family:'gibsonregular'; font-size:21px; color:#2e2d2c; padding-left:5%; padding-right:5%;}
.whychoose-quote-text{font-family:'gibsonregular'; font-size:17px; color:#2e2d2c; padding-left:5%; padding-right:5%;}



.section-whychoose-container .slick-next, .section-whychoose-container .slick-next:hover, .section-whychoose-container .slick-next:focus {background: url('../img/about/whychoose/next-button.png') no-repeat 0 0;}
.section-whychoose-container .slick-prev, .section-whychoose-container .slick-prev:hover, .section-whychoose-container .slick-prev:focus {background: url('../img/about/whychoose/prev-button.png') no-repeat 0 0;}
.section-whychoose-container .slick-next {opacity: 1; width: 40px; height: 40px; right:430px; top:405px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s;}
.section-whychoose-container .slick-next:hover {opacity: 0.7;}
.section-whychoose-container .slick-next:before {content: none;}
.section-whychoose-container .slick-prev {
    opacity: 1;
    width: 40px;
    height: 40px;
    left: 40%;
    top: unset;
    bottom: -55px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.section-whychoose-container .slick-next {
    opacity: 1;
    width: 40px;
    height: 40px;
    right: 40%;
    top: unset;
    bottom: -55px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.section-whychoose-container .slick-prev:hover {opacity: 0.7;}
.section-whychoose-container .slick-prev:before {content: none;}
.section-whychoose-container .slick-dots {
    position: absolute;
    bottom: -70px;
    display: block;
    width: 100%;
    list-style: none;
    text-align: center;
    margin-bottom: 3%;
}
.section-whychoose-container .slick-dots li button {
    width: 38px;
    height: 35px;
    position: relative;
    top: -11px;
    background: url('../img/about/whychoose/list-slide.png') no-repeat 0 0;
}

.section-whychoose-container .slick-dots li button:before {content: none;}
.section-whychoose-container .slick-dots li.slick-active button {background: url('../img/about/whychoose/list-slide-active.png') no-repeat 0 0;}
.whychoose-item-image-inner{text-align:center;}
.whychoose-img{margin:auto;}
.whychoose-slide-main-text{text-align:center; font-family:'touchebold'; font-size:36px; color:#ffcc00; margin-bottom: 5%;}
.whychoose-item-name{
    font-family:'touchebold';
    font-size: 16px;
    color:#ffcc00;
    text-align:center;
}

.whychoose-item-desc{
    font-family:'gibsonregular';
    font-size: 17px;
    color:#ffffff;
    text-align:center;
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: 10%;
}

.whychoose-item-image{
    min-height:145px;
}

.whychoose-img-separator{
    margin:auto;
    margin-top: 2%;
    margin-bottom: 2%;
}

.whychoose-separator-content, .whychoose-separator-content-2{width: 1%; float: left; text-align: center;}

.whychoose-slide-item{width:24%;float:left;}
.whychoose-slide-item-2{width:25%;float:left;}
.whychoose-slide-item-3{width:49%;float:left; padding-left: 20%;}
.whychoose-slide-item-4{width:50%;float:left; padding-right: 20%;}
.banner-image-left-ourresponsible {
    width: 57%;
    position: relative;
    left: 0px;
    top: -102px;
}

.babarafi-academy-left{width:50%;float:left;}
.babarafi-academy-right{width:50%;float:left;}
.babarafi-academy-title{font-family:'touchebold';font-size: 42px;color: #2e2d2c; margin-bottom:5%;}
.babarafi-academy-text{font-family:'gibsonregular'; font-size:17px; color: #2e2d2c;}
.babarafi-academy-img{position:relative; bottom:-90px;}
.babarafi-academy-image1-mobile {display: none; margin-bottom: 10px;}
.responsible-left{width:50%;float:left;padding-right:5%;}
.responsible-right{width:50%;float:left;padding-left:5%;}
.responsible-title{font-family:'touchebold'; font-size:29px; color: #2e2d2c;margin-bottom:5%;}
.responsible-text{font-family:'gibsonregular'; font-size: 17px; color: #2e2d2c;}
.responsible-text p{margin-bottom:20px;}

.responsible-text-mobile{font-family:'gibsonregular'; font-size: 15px; color: #2e2d2c;}
.responsible-text p{margin-bottom:20px;}


.accordion-responsible {
    background-color: #ffffff;
    color: black;
    cursor: pointer;
    padding: 0px;
    /* padding-left:30px; */
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 20px;
    font-style:bold;
    transition: 0.4s;
  }
  


  .accordion-responsible:after {
    /* font-family: FontAwesome; */
    /* content: url('../img/about/ourresponsible/'); */
    cursor:pointer;
    font-size: 30px;
    font-weight: 400;
    color: #d3b879;
    float: right;
    position: relative;
    top: -30px;
    text-align: right;
}
  
  .accordion-responsible.active:after {
    /* content: url('../img/franchise/franchisefaq/franchise-faq-up.png'); */
    cursor:pointer;
    /* transform: rotate(90deg) perspective(0); */
  }
  
  .panel-responsible {
    padding: 0px 0px;
    margin-top: 5%;
    margin-bottom: 5%;
    border: none;
    background-color: #ffffff;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }

  .accordion-button-image{
      width:100%;
      background: url('../img/about/ourresponsible/accordion-our-responsible.png') no-repeat top center;
      background-size: cover;
      height: 20px;
  }


.our-responsible-separator, .our-responsible-separator-mobile { 
    margin-top: 3%;
    margin-bottom: 3%;
    background: url('../img/about/ourresponsible/border-line.png') no-repeat top center;
    background-size: cover;
    width: 100%;
    height: 9px;
}

.our-responsible-separator-mobile {display: none; margin-top: 40px; margin-bottom: 40px;}

.button-csr {
    opacity: 1;
    background: url('../img/about/ourresponsible/button-submit.png') no-repeat 0 0;
    /* background-size: 100% 100%; */
    background-size: cover;
    width: 250px;
    height: 43px;
    padding-top: 11px;
    letter-spacing: 1px;
    text-align: center;
    font-family: 'touchebold';
    font-size: 11px;
    color: #ffcc00;
    margin-left: 20%;
    margin-top: 30px;
    
}

.separator-yellow-decor {
    background: url('../img/about/ourresponsible/yellow-decoration.png') no-repeat 0 0;
    /* background-size: 100% 100%; */
    background-size: cover;
    width: 100%;
    position: relative;
    z-index: 1;
    top: -70px;
    height: 110px;
}

.csr-left{ width:60%;float:left;}
.csr-right{width:40%;float:left;}
.csr-text{font-family:'gibsonregular'; font-size:18px; color:#2e2d2c;}

.banner-image-left-history {
    width: 99%;
    position: relative;
    left: 0px;
    top: -102px;
}
.history-text{
    font-family: 'gibsonregular';
    font-size: 17px;
    color: #575756;
}

.history-text p{margin-bottom:20px;}

.firstcharacter {
    color: #ffcc00;
    float: left;
    font-family: 'touchebold';
    font-size: 53px;
    line-height: 45px;
    padding-top: 0px;
    padding-right: 8px;
    padding-left: 3px;
}


.ul-mission{
    padding-left:0; font-family:'gibsonregular'; font-size:17px; color:#ffffff; 
}


ul.ul-mission li{
    background:url('../img/about/history/mission-list.png') 2px 4px no-repeat; 
    display: list-item;
    padding: 0px 3px 3px 30px;
    overflow: visible;
    list-style: none;
    line-height: 1.7em;
}

.history-column-left{
    width:50%; 
    float:left;
    padding-left:5%;
}

.history-column-right{
    width:50%; 
    float:left;
}

.history-baba-rafi-text{
    font-family:'touchebold'; 
    font-size:36px; 
    color:#2e2d2c;
    margin-bottom: 5%;
    line-height: 1.2em;
}

.img-logo-icon-history{
    position:relative; 
    top:-160px;
}

.img-history-column-left{
    width:50%; 
    float:left; 
    padding-left:-10%;
}

.history-column-text{
    width:50%; 
    float:left; 
    padding-right: 5%;
}

.company-profile-text{
    font-family:'touchebold'; 
    font-size:36px; 
    text-align:center; 
    color:#2e2d2c;
}

.video-content{
    width:100%; 
    height:600px; 
    margin-top:5%;
}

.vision-mission-text{
    font-family:'touchebold'; 
    font-size:36px; 
    color:#ffcc00; 
    text-align:center;
    margin-bottom: 45px;
}

.vision-mission-section{
    width:50%; 
    float:left;
}

.vision-mission-text-2{
    font-family:'touchebold'; 
    font-size:18px; 
    color:#ffcc00;
    margin-bottom: 3%;
    letter-spacing: 2px;
}

.vision-strip{
    position: relative;
    top: -5px;  
    margin-left: 2%;
}

.vision-text{
    font-family:'gibsonregular'; 
    font-size:18px; 
    color:#ffffff;
    letter-spacing: 0.7px;
    line-height: 2.0em;
    white-space: nowrap;
}


.ul-mission li{margin-bottom:25px;}

/* untuk history  */

/* .img-history-timeline {
    position: absolute;
    top: 346px;
    left: 56px;
    max-width: 100%;
    display:none;
} */

/* .history-img-year-content {
    position: absolute;
    text-align: center;
    margin-top: 10px;
} */

/* .history-about-year-text {
    text-align: center;
    width: 160px;
    font-family: 'touchebold';
    font-size: 28px;
    color: #2e2d2c;
    margin-top: 10px;
    position: relative;
} */

ul.list-item-history-about {
    list-style-image: url('../img/about/history/pointer.png');
    font-family:'gibsonregular';
    font-size:14px;
    color:#2e2d2c;
    padding-left: 30px;
}

.list-history-1{
    position: relative;
    top: 25px;
}
.list-history-2{    
    position: relative;
    top: 60px;
}
.list-history-4{
    position: relative;
    top: 90px;
}
.history-about-image{text-align:left;min-height: 170px;}
.history-about-number{text-align:center; margin-top:10px;}
.history-about-text {
    font-family: 'gibsonbold_italic';
    font-size: 17px;
    color: #ffcc00;
    position: relative;
    z-index: 10;
    top: -32px;
    text-align: center;
}

.img-3-logo-about{
    position: relative;
    top: 39px;
}
.img-4-logo-about{
    position: relative;
    top: 40px;
}

.text-336 {
    position: absolute;
    font-family: 'touchebold';
    font-size: 59px;
    color: white;
    /* text-align: center; */
    margin-left: 50px;
    margin-top: -4px;
}

.text-outlet{
    position: absolute;
    /* top: 0px; */
    margin-top: 62px;
    margin-left: 90px;
    font-family: 'touchesemibold';
    font-size: 14px;
    color: #2e2d2c;
}

.text-outlet-2 {
    position: absolute;
    /* top: 0px; */
    margin-top: 64px;
    margin-left: 4px;
    font-family: 'touchesemibold';
    font-size: 14px;
    color: #2e2d2c;
}

.text-1200{
    font-family: 'touchebold';
    font-size: 59px;
    color: white;
    position: absolute;
}

.vision-mission-arrow{margin-top: 45px;}

.about-history-column-1{width:100%; min-height: 303px;}
.about-history-column-2{width:100%; min-height: 303px;}
.about-history-column-3{width:100%;}
.milestone-text-content{width:33%;float:left;text-align:left;}
.milestone-text{font-family:'touchebold'; font-size:48px; color:#2e2d2c; padding-right:15%;}
.center-column{width:34%;float:left;text-align:left;}
.history-image-container-left{width:40%;float:left;}
.list-right-column{width:55%;float:left;}
.history-column-content{width:33%;float:left;text-align:left;}


/* FOR MILESTONE NEW */

.about-history-column-1{width:100%; min-height: 303px;}
.about-history-column-2{width:100%; min-height: 303px;}
.about-history-column-3{width:100%;}
.about-milestone-content{width:33%;float:left;text-align:left;}
.about-column-milestone-center{width: 34%;float: left;text-align: left;}
.about-milestone-large-text{font-family:'touchebold'; font-size:48px; color:#2e2d2c; padding-right:15%;}
.about-milestone-image-content{width:40%;float:left;}
.about-history-image {text-align: left;min-height: 160px;}
.about-img-year-content {position: relative; text-align: center; background: url('../img/home/year-content-img.png') no-repeat; background-size: contain; width: 100%; height: 42px; margin-top: 10px;}
.about-year-text {text-align: center;width: 100%;font-family: 'touchebold';font-size: 28px;color: #2e2d2c;margin-top: 10px;position: relative;}
.about-history-number{text-align:center; margin-top:10px;}
.about-history-text {font-family: 'gibsonbold_italic';font-size: 17px;color: #ffcc00;position: relative;z-index: 10;top: -32px;text-align: center;}
.about-milestone-list-content{width:55%;float:left;}
.about-milestone-item{width:33%;float:left;text-align:left;}



/* .about-milestone-list-content ul{
    list-style-image: url('../img/about/history/pointer.png');
    font-family:'gibsonregular';
    font-size:14px;
    color:#2e2d2c;
    padding-left: 30px;
}
.test-relative-1{position:relative; top: -46px;  z-index: -1;}
.border-line-right-item{border-bottom:2px solid black; position:absolute;  width: 20%;}
.border-line-last{border-bottom: 2px solid black;position: absolute;width: 44%;}
.border-line-left-item{border-bottom:2px solid black; position:absolute;  width: 80%;margin-left: 20%;}
.border-line-center-item{border-bottom:2px solid black; position:absolute;  width: 100%;}


.line-about-start-icon {
    position: absolute;
    max-width: 7%;
    top: -6px;
    left: -12%;
}

.line-about-end-icon{
    position: absolute;
    max-width: 7%;
    top: -9px;
    left: 52%;
} */


/* ADDED BY HENRY */

#section-about-history #row-1 {padding-left: 5%; padding-right: 5%; margin-bottom: 40px;}
#section-about-history #row-1 .column-left {float: left; width: 50%;}
#section-about-history #row-1 .column-right {float: left; width: 50%; position: relative; padding-left: 3%; text-align: right;}
.img-logo-icon-history {top: 0; position: absolute;}
#section-about-history #row-2 {padding-right: 5%;}
#section-about-history #row-2 .column-left {float: left; width: 50%;}
#section-about-history #row-2 .column-right {float: left; width: 50%; padding-left: 3%;}
.history-image-mobile {display: none;}

/* ADDED BY HENRY UNTIL HERE */

/* .history-text:first-child:first-letter {
    color: #903;
    float: left;
    font-family: Georgia;
    font-size: 75px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
  } */

  /* p:first-child:first-letter {
    color: #903;
    float: left;
    font-family: Georgia;
    font-size: 75px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
  } */

@media all and (max-width:1250px){
    .about-year-text {
        top: -2px;
    }
}

@media all and (max-width:1200px){
    .about-year-text {
        top: -3px;
    }

    .about-history-number {
        text-align: center;
        margin-top: 20px;
    }
}

 @media all and (max-width:1100px){
    .aboutus-slide-title {font-size: 33px;}
    .aboutus-slide-desc {font-size: 15px;}

    .whychoose-item-name {font-size: 15px;}
    .whychoose-item-desc {font-size: 15px;}
    .section-whychoose-container .slick-prev {left: 35%;}
    .section-whychoose-container .slick-next {right: 35%;}

    .babarafi-academy-img {bottom: -30px;}

    .about-milestone-large-text {
        font-family: 'touchebold';
        font-size: 45px;
        color: #2e2d2c;
        padding-right: 15%;
    }
}

@media all and (max-width:1050px){
    .about-year-text {
        top: -3px;
        font-size: 24px;
    }
}

@media all and (max-width:1000px){
    .aboutus-slide-title {font-size: 30px;}
    .aboutus-slide-desc {font-size: 14px;}

    #section-whychoose-slide {padding-left: 5%; padding-right: 5%;} 

    .section-whychoose-container .slick-prev {bottom: -60px;}
    .section-whychoose-container .slick-next {bottom: -60px;}

    #section-history-video {padding: 70px 5% 70px 5%;}

    .babarafi-academy-img {bottom: -10px;}

    .about-milestone-large-text {
        font-family: 'touchebold';
        font-size: 40px;
        color: #2e2d2c;
        padding-right: 15%;
    }
}

@media all and (max-width:950px){
    .about-img-year-content {
        margin-top: -20px;
    }

    .vision-text {
        font-size: 15px;
    }
}

@media all and (max-width:900px){
    .aboutus-slide-title {font-size: 27px;}
    .aboutus-slide-desc {font-size: 13px;}
    .whychoose-quote-text-1 {font-size: 19px;}
    .whychoose-quote-text {font-size: 16px;}
    .aboutus-whychoose-border-content {font-size: 15px;}
    .whychoose-slide-item, .whychoose-slide-item-2 {width: 48%;}
    .whychoose-separator-content-2 {visibility: hidden;}
    .video-content {height: 500px;}
    .babarafi-academy-title {font-size: 36px;}
    .babarafi-academy-text {font-size: 16px;}
    .about-history-text {font-size: 15px;}
}

@media all and (max-width:850px){
    .about-milestone-large-text {
        font-family: 'touchebold';
        font-size: 35px;
        color: #2e2d2c;
        padding-right: 15%;
    }

    .about-img-year-content {
        margin-top: -45px;
    }

    .about-year-text {
        top: -1px;
        font-size: 20px;
    }
}

@media all and (max-width:800px){
    .aboutus-slide-right, .aboutus-slide-left {float: none; width: 100%;}
    .aboutus-slide-title {font-size: 38px;}
    .aboutus-slide-desc {font-size: 17px;}

    .section-whychoose-container .slick-prev {left: 30%; bottom: -65px;}
    .section-whychoose-container .slick-next {right: 30%; bottom: -65px;}

    #section-about-history #row-1 {padding-left: 0; padding-right: 0; margin-bottom: 40px;}
    #section-about-history #row-1 .column-left {float: none; width: 100%;}
    #section-about-history #row-1 .column-right {display: none;}
    .img-logo-icon-history {display: none;}
    .history-image-mobile {display: block; width: 100%; margin-bottom: 30px;}
    .history-baba-rafi-text {padding-left: 5%; padding-right: 5%;}
    .history-baba-rafi-text br {display: none;}
    .history-text {padding-left: 5%; padding-right: 5%;}
    #section-about-history #row-2 {padding-right: 0;}
    #section-about-history #row-2 .column-left {float: none; width: 100%;}
    #section-about-history #row-2 .column-left img {margin-bottom: 30px;}
    #section-about-history #row-2 .column-right {float: none; width: 100%;}

    .video-content {height: 450px;}
    .vision-text {font-size: 16px;}
    .ul-mission {font-size: 16px;}

    .babarafi-academy-title {font-size: 32px;}
    .babarafi-academy-text {font-size: 15px;}
    .babarafi-academy-img {display: none;}

    .responsible-title {font-size: 26px;}
    .responsible-text {font-size: 15px;}
    .button-csr {margin-left: 3%;}
    #section-responsible-csr {padding-left: 5%; padding-right: 5%;}

    .about-year-text {
        top: -3px;
        font-size: 18px;
    }

    .vision-text {
        font-size: 13px;
    }
}

@media all and (max-width:700px){
    #section-responsible-list-mobile{display:block;}
    #section-responsible-row-2 {display:none;}
    #section-responsible-row-3 {display:none;}

    #section-responsible-row-4{display:none;}
    #section-responsible-row-4-mobile{display:block;}
    .aboutus-slide-title {font-size: 33px;}
    .aboutus-slide-desc {font-size: 15px;}

    .whychoose-quote-content {margin-bottom: 0;}
    .whychoose-quote-left, .whychoose-quote-right {float: none; width: 100%; margin-bottom: 60px;}
    .whychoose-quote-img {float: none; width: 100%; text-align: center; margin-bottom: 40px;}
    .whychoose-quote-text-content {float: none; width: 100%;}

    .video-content {height: 400px;}
    .vision-mission-section {float: none; width: 100%; margin-bottom: 30px;}
    .vision-mission-section {float: none; width: 100%; }

    .babarafi-academy-image1-mobile {display: block;}
    .babarafi-academy-right {display: none;}
    .babarafi-academy-left {float: none; width: 100%;}

    .responsible-left {float: none; padding-right: 0; width: 100%;}
    .responsible-right {float: none; padding-left: 0; width: 100%;}
    .our-responsible-separator-mobile {display: block;}
    .our-responsible-separator {display: none;}
    .responsible-pointer-marker {display: none;}
    .responsible-text {display: none;}
    .responsible-title {cursor: pointer;}

    .csr-left, .csr-right {float: none; width: 100%;}
    .button-csr {margin: 0 auto; margin-top: 30px;}

    .about-foundation-content{width:100%;}

    .about-hs-foudation-title {
        font-size: 26px;
        margin-bottom:5%;
        text-align:center;
    }

    .about-hs-foudation-text {
        font-size: 15px;
    }

    /* FOR MILESTONE NEW */
    #section-history-milestone{display:none;}
    #section-history-milestone-mobile{display:block;}
    .about-milestone-content {
        width: 100%;
        float: left;
        text-align: left;
        margin-bottom: 10%;
    }

    .about-column-milestone-center {
        width: 100%;
        text-align: left;
        margin-bottom: 10%;
    }

    .about-milestone-large-text {
        font-size: 34px;
        padding-right: 0%;
    }

    .about-milestone-image-content {
        width: 30%;
    }

    .about-img-year-content {
        margin-top: 0px;
    }

    .about-year-text {
        font-size: 21px;
        margin-top: 21px;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 3px;
        text-align: center;
        padding-right: 15px;
    }

    .about-history-number {
        display:none;
    }

    .about-milestone-list-content {
        width: 70%;
    }

    .about-milestone-item {
        width: 100%;
        margin-bottom: 10%;
    }


    .vision-text {
        font-size: 16px;
    }

    .whychoose-slide-item-3{width:49%;float:left; padding-left: 0%;}
    .whychoose-slide-item-4{width:50%;float:left; padding-right: 0%;}
}

@media all and (max-width:650px){
    .gradient-left, .gradient-right {display: none;}

    .about-year-text{
        padding-right: 0px;
    }
}

@media all and (max-width:600px){
    .aboutus-slide-title {font-size: 27px;}
    .aboutus-slide-desc {font-size: 13px;}

    #section-about-whychoose-quote {padding-left: 5%; padding-right: 5%;}
    .whychoose-slide-item, .whychoose-slide-item-2, .whychoose-slide-item-3, .whychoose-slide-item-4 {float: none; width: 100%;}
    .whychoose-separator-content, .whychoose-separator-content-2 {display: none;}
    .whychoose-slide-item-3 {padding-left: 0;}
    .whychoose-slide-item-4 {padding-right: 0}
    .section-whychoose-container .slick-prev {left: 25%; bottom: -70px;}
    .section-whychoose-container .slick-next {right: 25%; bottom: -70px;}

    .video-content {height: 350px;}
}

@media all and (max-width:500px){
    #section-about-whychoose-quote {padding-left: 2%; padding-right: 2%;}
    .video-content {height: 300px;}
    .company-profile-text, .vision-mission-text {font-size: 30px;}
}

@media all and (max-width:450px){
    .about-img-year-content {
        margin-top: -15px;
    }

    .about-year-text{
        top:0px;
    }
}
@media all and (max-width:400px){
    .section-whychoose-container .slick-prev {left: 20%; bottom: -75px;}
    .section-whychoose-container .slick-next {right: 20%; bottom: -75px;}
    .video-content {height: 250px;}
    .babarafi-academy-title {font-size: 28px;}
    .about-img-year-content {
        margin-top: -25px;
    }

    .about-year-text {
        top: -2px;
    }

    .vision-text {
        font-size: 15px;
    }
}

@media all and (max-width:350px){
    .section-whychoose-container .slick-prev {left: 15%;}
    .section-whychoose-container .slick-next {right: 15%;}
    .video-content {height: 200px;}
    .about-img-year-content {
        margin-top: -45px;
    }

    .about-year-text {
        top: -1px;
        font-size:20px;
    }

    .about-milestone-item {
        margin-bottom: 5%;
    }

    .vision-text {
        font-size: 12px;
    }
}

@media all and (max-width:320px){
    .about-img-year-content {
        margin-top: -50px;
    }

    .about-year-text {
        top: -1px;
        font-size: 18px;
    }
}